This question already has answers here:
Javascript can't find element by id? [duplicate]
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
i cannot find answer to my question in someone else post so here it is:
getElementById return null in java script file (also while testing in console) but work in html file
HTML file
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body>
<p id="stuff">Some text</p>
</body>
</html>
JS file
var title = document.getElementById('stuff');
console.log(title);
title.style.color = "#D4F34A";
You can add a callback function for the document event DOMContentLoaded event like so, and inside that function do your desired code:
//Add this into your script file, and anything you want to have execute once the document
//is fully loaded go inside of the function
document.addEventListener("DOMContentLoaded", function(event) {
var title = document.getElementById('stuff');
console.log(title);
title.style.color = "#D4F34A";
});
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I wrote a simple code to learn Eventhandling in JavaScript but when I click on the button "Click" the function hello() does not work, why?
html file:
<!DOCTYPE html>
<html>
<head>
<script src="hello.js"></script>
</head>
<body>
<button id="click">Click</button>
</body>
</html>
JavaScript file:
document.getElementById("click").onclick = hello;
function hello() {
alert("You Clicked!");
}
You are calling the script before the dom is generated. experiment to call the right before the tag.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am new to HTML and JavaScript. I have put tag in head, but it is not working. Its code is given. However, it works when I place it in the body section. Why it is not working inside the tag?
<head>
<script>
document.getElementById("demo").innerHTML = "Hello, World!";
<script>
</head>
<body>
<p id = "demo"> </p>
</body>
It does, but your script is executed before your DOM is loaded properly. Use
window.onload = function() {
document.getElementById("demo").innerHTML = "Hello, World!";
}
Also it's possible to use the onload attribute:
<body onload="jsFunction()"></body>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I invoke a function named Func() in my JS code and it should change a html tag content with innerHTML method but it doesn't work.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="result">results will be here</p>
</body>
</html>
JavaScript code
function Func(){
var a = "Hello world";
document.getElementById("result").innerHTML = a;
}
Func();
The console shows this error:
Uncaught TypeError: Cannot set property 'innerHTML' of null
Change so:
Document.addEventListener("DOMContentLoaded",
function(event) {
Func();
});
Or if you have jquery use it for ready event.
You can call this function Func only if the Dom is ready and the element result is ready
This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 3 years ago.
i have tried a lot but nothing found any help.Please help me..
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Link1|| Link2
<div id="target"> </div>
<br clear="all" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript">
$(document).ready(function() {
$('#nav1').click(function() {
$('#target').load('home.txt');
});
$('#nav2').click(function() {
$('#target').load('link.txt');
});
)
};
</script>
</body>
</html>
please help me. I want to get the txt file when i click on the link1 and link2
The script tag cannot have the src attribute and a body, you need to use separate script tags.
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#nav1').click(function () {
$('#target').load('home.txt');
});
$('#nav2').click(function () {
$('#target').load('link.txt');
});
});
</script>
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I recently started to learn jQuery so I had some exercices to do. This one is about displaying messages by clicking on page element. Here is the code :
var $caption = $('caption');
$caption.on('click', function(event) {
$(' <td>Wp it worked</td>').insertAfter('tr');
});
<!DOCTYPE html>
<html>
<head>
<title>Happy Birthday !</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<table>
<caption>Click here</caption>
<tr>
</tr>
</table>
</body>
</html>
So the problem is that it doesn't work. When I write the script in the console it works perfectly, but with the js file it basicly doesn't. So I know it's not a problem of folder because when I put something like alert('test'); in the js file it works. Someone knows why ?
it is working in the snippet , however you may try this.
$(document).ready(function () {
var $caption = $('caption');
$caption.on('click', function (event) {
$(' <td>Wp it worked</td>').insertAfter('tr');
});
});