This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
Why am I getting a console error "Uncaught TypeError: Cannot set property 'ondragover' of null"
<html>
<head>
<title></title>
<script>
var dragzone = document.getElementById('DragZone');
dragzone.ondragover=function() {
console.log("Bang");
return false;
};
</script>
</head>
<body>
<div id="DragZone">Drag a file over here</div>
</body>
</html>
You are trying to access the DOM element before it was created. Move the script to the bottom of <body> and it will work.
<html>
<head>
<title></title>
</head>
<body>
<div id="DragZone">Drag a file over here</div>
<script>
var dragzone = document.getElementById('DragZone');
dragzone.ondragover=function() {
console.log("Bang");
return false;
};
</script>
</body>
</html>
Related
This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js">
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Why won't this work? I am using the brackets IDE currently.
The problem is you set src="main.js", in this case all script inside script tag will be not execute, it only execute javascript in main.js file.
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://geology.com/world/world-map-360.gif')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
You need to remove the src="main.js" from your script tag
Does this fix it ?
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://fsb.zobj.net/crop.php?r=e9wUbuA4gtFtr46UA2PE5GMcriRP4IPSzPTWOBs82VJEK_zIJcyRW5kh6JE_GrxfEmFki6gil-dD-LL5eMpMNcj5Sjw4u4Y6MwkMhR-1WlgJ50l6FRXVLRylR_2lbwvcMeLEOIUkEzNPODPaAqMfI4ClDs3vu9s3Z2s8bF55uCt0KPXzxye5ueQyfDyFFgfks2aGkOwr7pURMvK_')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body>
</html>
Delete src="main.js" on script tag
if you want to use main.js file. you have to add extra script tag
like this
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js"></script>
<script>
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Or you can add myFunction on your main.js file
Use the following code snippet for the add background image.
// Sets the background image
const setBackground = (image) => {
document.body.style.background = "url('"+IMAGE_URLS.[image]+"')";
};
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
I am trying to get video frame count as the code here
I have downloaded videoFrame.js from here and located in my website directory.
But while clicking on play the video not playing also getting error like,
ReferenceError: $ is not defined in the line var currentFrame = $('#currentFrame');
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="frame">
<span id="currentFrame">0</span>
</div>
<video height="180" width="100%" id="video">
<source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
<div id="controls">
<button id="play-pause">Play</button>
</div>
<script>
var currentFrame = $('#currentFrame');
var video = VideoFrame({
id : 'video',
frameRate: 29.97,
callback : function(frame) {
currentFrame.html(frame);
}
});
$('#play-pause').click(function(){
if(video.video.paused){
video.video.play();
video.listen('frame');
$(this).html('Pause');
}else{
video.video.pause();
video.stopListen();
$(this).html('Play');
}
});
</script>
</body>
</html>
You need to include jQuery add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
to the html head.
You need to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Try adding a call to jquery library
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have tried Google for an answer to this and others have looked at my work but we can't understand what is wrong here ......? My HTML displays correctly but my Javascript does not run? I am new to Javascript so please explain things simply! My Javascript is in a separate stylesheet from my HTML.
var name;
document.getElementById("changeName").onclick = newName;
function newName() {
name = prompt("What is your name?");
updateName();
}
function updateName() {
document.getElementById("myName").innerHTML = name;
}
var item1;
var item2;
var item3;
document.getElementById("changeList").onclick = newList;
function newList() {
item1 = prompt("Enter a new first thing: ");
item2 = prompt("Enter a new second thing: ");
item3 = prompt("Enter a new third thing: ");
updateList();
}
function updateList() {
document.getElementById("firstThing").innerHTML = item1;
document.getElementById("secondThing").innerHTML = item2;
document.getElementById("thirdThing").innerHTML = item3;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
<style type="text/javascript" src="JS/javascript.js"></style>
</head>
<body>
<h1 id="myName">Elizabeth</h1>
<button id="changeName" type="button">Add Your Name</button>
<hr>
<p id="aboutMe">I'm learning to build dynamic pages with JavaScript and HTML!</p>
<hr>
<h1>Things I Like</h1>
<p>Here are some of the things I like to do:</p>
<ol>
<li id="firstThing">Write JavaScript</li>
<li id="secondThing">Travel the world</li>
<li id="thirdThing">See my friends</li>
</ol>
<button id="changeList" type="button">Change Your List</button>
</body>
</html>
JavaScript doesn't go in "stylesheets". It goes in script files.
This:
<style type="text/javascript" src="JS/javascript.js"></style>
is wrong. Instead you want this:
<script src="JS/javascript.js"></script>
Your code works, but javascript it's not stylesheet, that's CSS.
Change this:
<style type="text/javascript" src="JS/javascript.js"></style>
With this:
<script type="text/javascript" src="JS/javascript.js"></script>
And it works.
Once you fix the <style>/<script> error...
Web pages are loaded top down. So what happens is your JavaScript is loaded and run first. In the second line of your JavaScript you try to get an HTML element.
The problem is the HTML element doesn't exist yet because the web browser hasn't loaded/rendered the HTML yet.
This will not work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
<script>
var dingo = document.getElementById("dingo")
// this will not work because the HTML hasn't finished loading and rendering so the DIV doesn't exist yet
</script>
</head>
<body>
<div id="dingo">ate my baby</div>
</body>
</html>
This will work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
</head>
<body>
<div id="dingo">ate my baby</div>
<script>
var dingo = document.getElementById("dingo")
// this will work
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>
I'm having trouble setting a variable and can't find any helpful documentation.
This works:
<!DOCTYPE html>
<html>
<body onload="alert(document.getElementById('foo').firstChild.nodeValue)">
<a id="foo" href="old">Foobar</a>
</body>
</html>
But this does not work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var theText = document.getElementById('foo').firstChild.nodeValue ;
</script>
</head>
<body onload="alert(theText)">
<a id="foo" href="old">Foobar</a>
</body>
</html>
The alert says "undefined". What I really want to do is something like this, which also does not work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var theElement = document.getElementById('foo') ;
var theText = theElement.firstChild.nodeValue ;
document.write(theElement.getAttribute('href')) ;
theElement.setAttribute('href', theText) ;
document.write(meta.getAttribute('href')) ;
</script>
</head>
<body>
<a id="foo" href="old">Foobar</a>
</body>
</html>
Why is this not working?
When your script runs, the foo element doesn't exist. If you check the JavaScript console you should see an error, along the lines of this:
Uncaught TypeError: Cannot read property 'firstChild' of null
You get this error because getElementById will return null if the element you're looking for isn't found.
You need to execute the JavaScript code after the markup. Move your script tag to the bottom of the body, or put it in a DOM ready/load event handler. For example:
<body onload="alert(theText)">
<a id="foo" href="old">Foobar</a>
<!-- Now the `foo` element actually exists, our script can find it -->
<script type="text/javascript">
var theText = document.getElementById('foo').firstChild.nodeValue;
</script>
</body>