getElementById() work in html file but not in js file [duplicate] - javascript

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

Why is onclick not working in JavaScript? [duplicate]

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.

Why <script> not working inside the <head> tag? [duplicate]

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>

Why innerHTML doesn't work when it invokes from the JS code? [duplicate]

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

I am facing some problem to load content of text file using jquery ajax [duplicate]

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">&nbsp</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.

Script only works in console [duplicate]

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');
});
});

Categories

Resources