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>
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]+"')";
};
I trying to change the color of a "p" tag using getElementById(), but its not working...
HTML:
<p id="fon">changing color</p>
JavaScript:
var c = document.getElementById(fon);
c.style.color = 'blue';
The id should be in quotation marks
document.getElementById("fon");
If you want to change paragraph color using JS. You can use this code .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function changecolor()
{
document.getElementById("fon").style.color='blue';
}
</script>
</head>
<body>
<p id="fon" onclick="changecolor()"> hello this is a para</p>
</body>
</html>
I'm writing a simple Cat Clicker app with HTML and JS, but this code keeps spitting 'Cannot read property 'getElementById' of null' error.
What's wrong with it??
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script>
'use strict'
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
</script>
</head>
<body>
<p id="counter" >0</p>
<img id="cat" src="img/cat1.jpg" alt="cat">
</body>
</html>
I've corrected a few issues below. You need to use document rather than document.body. You need to ensure the dom has completed loading so I added a content loaded event listener.
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script>
'use strict'
document.addEventListener("DOMContentLoaded", function() {
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
});
</script>
</head>
<body>
<p id="counter" >0</p>
<h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
</body>
</html>
You need to include <script> Tags after the body of the HTML DOC or at least at the very end of your HTML content.
This is b/c how the DOM operates. It loads everything in a sequential order, thus your script it attempting to target an element which doesn't yet exist in the DOM
Just put your script tag after the body tag because I think the problem is that the DOM is rendering after the script runs.
And you can also use document.getElementById instead of document.body.getElementById
just use onclick="incClick()" in your h1 tag , or u can define it as image
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
</head>
<body>
<p id="counter">0</p>
<h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
<p class="counter">0</p>
<img class="cat" src="img/cat2.jpg" alt="cat">
<!--
You need to put the script tag at the end of the body
Because the document must first be created
-->
<script>
'use strict'
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
</script>
</body>
</html>
This worked for me. You are mistakenly calling getElementById from document.body where it doesn't exist. It is document.getElementById:
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script>
'use strict'
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
</script>
</head>
<body>
<p id="counter">0</p>
<h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
<!-- <p class="counter">0</p>
<img class="cat" src="img/cat2.jpg" alt="cat"> -->
</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 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>
I'm working on a basic quiz Javascript game, but when I use
document.getElementById("demo").innerHTML = "text";
I get this error message:
Uncaught TypeError: Cannot set property 'innerHTML' of null
in the Chrome Console. I have no idea why this no longer works, it has worked for me in the past. However, if I open up a new
tag, the function runs and the code works. It's only when I run the function in the same
tag.
My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); //this one does not work
</script>
</head>
<body>
<p id="qarea"><p>
<p id="demo"></p>
<script>
quiz(); //this one does work
</script>
</body>
</html>
You forgot to include id in front of your ="demo" it should look like <p id="demo"> instead of
<p="demo"></p>
Second the reason the first call to quiz does not work is that your document has not loaded yet. you want to do this on pure js
<body onload="myFunction()">
Like this should work: http://jsfiddle.net/t8jnhmhg/1/ <p="demo" is wrong
It should be the following.
Where you would have to add the id attribute to the p tag.
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); // Will not work here because there is no such
// element with ID "demo" at this point in the page load.
</script>
</head>
<body>
<p id = "qarea"><p>
<p id = "demo"></p>
<script>
document.addEventListener( "DOMContentLoaded", function(){
quiz(); // Will work here because the DOM is loaded at this point.
});
</script>
</body>
</html>