why my js cannot be linked to html? [duplicate] - javascript

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.
<!doctype html>
<html>
<head>
<script type="text/javascript">
var instock=true;
var shipping=false;
var elstock= document.getElmentById('stock');
elstock.className=instock;
var elship= document.getElmentById('note');
elship.className=shipping;
//the text should be updated by values stored
//in these variables.
</script>
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<div class="message">Available:
<span id="stock"></span>
</div>
<div class="message">Shipping:
<span id="shipping"></span>
</div>
</div>
</body>
</html>
why js cannot be linked to html??? and how i can link css images to js as well?
For example, if it is true, show circle image. If it is false, show cross image.

According to the Chrome console:
Uncaught TypeError: document.getElmentById is not a function
You are missing the 'e', try document.getElementById.
Also, once that´s fixed, you will see:
Cannot set property 'className' of null
That's because you need to run the code once the page is loaded (as stated in the comments).
Then you will have another problem because you are trying to access the element with id note and there's no one, I guess you are trying to get shipping there.
Try this code:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function onloaded () {
var instock=true;
var shipping=false;
var elstock= document.getElementById('stock');
elstock.className=instock;
var elship= document.getElementById('shipping');
elship.className=shipping;
//the text should be updated by values stored
//in these variables.
}
</script>
</head>
<body onload="onloaded()">
<h1>Elderflower</h1>
<div id="content">
<div class="message">Available:
<span id="stock"></span>
</div>
<div class="message">Shipping:
<span id="shipping"></span>
</div>
</div>
</body>
</html>

Related

Problems with getElementById [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'm trying to write simple web app in VSCode. I have little misunderstanding. May be its really simple thing, but i don't know why it doesn't work normally like in examples which i saw.
i have js file (script.js)
function getHistory(){
return document.getElementById("history-value").innerText;
}
alert( getHistory());
and my index.html where i'm using div's tags
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>
in beginning of course referense to js
<head>
<title>Calculator</title>
<meta charset="utf-8" >
<link rel="stylesheet" href="style.css">
<script src="script.js">
</script>
</head>
But allert are not working. I can't see nothing. If i use
console.log (document.getElementById("history-value").innerText );
it shows null in console window.
Please explain me what's wrong with it?
1) As Java script is loaded before html page so you have to add script tage at bottom of the page in your case as you are taking value of history-value element which you have added after script tag so when script tag is loaded there is no element with id history-value so you will get null. So you have to add this script after this element
index.html
<head>
<title>Calculator</title>
<meta charset="utf-8" >
<link rel="stylesheet" href="style.css">
</head>
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>
<script src="script.js"></script>
script.js
function getHistory(){
return document.getElementById("history-value").innerText;
}
alert( getHistory());
The problem is that your <script> tag appears in the <head> section of your document, and when the script loads, the rest of your HTML has not yet been loaded by the browser, so the <p id="history-value"> tag effectively does not yet exist as far as the browser is concerned.
In this case, you should put your <script> tag just before the </body> tag, or at the very least after the <p id="history-value"> tag, so that <p> tag appears before the Javascript attempts to read it.
It looks like the script runs when there is no history-value element.
Are you sure you are running the code after document has been loaded?
Your code work in the following snippet (but I guess is due to the fact that javscript is loaded at the end of the document).
But to make sure you can place into a
document.addEventListener( 'DOMContentLoaded', function( event ) {
// your code here
})
function getHistory(){
return document.getElementById("history-value").innerText;
}
document.addEventListener( 'DOMContentLoaded', function( event ) {
alert(getHistory());
});
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>

How to insert JavaScript variable into jQuery to be inserted into HTML elements? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I've working on something where I need to put the JS variables in a separate JS file (just in one HTML file for now). I want all the variables' text to be in JS instead of just putting them in jQuery.
Here's what I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var tempTitle = "Title";
var tempNavTitle = "Nav Title";
</script>
<script>
$("title").html(tempTitle);
$(".nav > .nav-id > .nav-title").html(tempNavTitle);
</script>
</head>
<body>
<div class="nav">
<div class="nav-id">
<div class="nav-title"> </div>
</div>
</div>
</body>
As you can see, I've already got the title part working, but the HTML part isn't working (and that's my issue).
You don't separate plain JavaScript from JQUery. They are both JavaScript. As long as a variable is in scope, you can access it.
// When the document's HTML is fully parsed, run the function
// passed to JQuery:
$(function(){
var tempTitle = "Title";
var tempNavTitle = "Nav Title";
// Use .text(), not .html() when setting/getting non-HTML strings
$("title").text(tempTitle);
$(".nav > .nav-id > .nav-title").text(tempNavTitle);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="nav-id">
<div class="nav-title"> </div>
</div>
</div>

Why is a DOM element null? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I have this simple HTML file:
<!DOCTYPE html>
<html>
<head>
<script src='test.js'></script>
</head>
<body>
<p>I am a paragraph tag</p>
<h1 >I am an h1 tag</h1>
<div id="id"> I am a div tag</div>
</body>
And this simple script (test.js):
y=document.getElementById("id");
y.style.color="green";
Why on earth is "y" null? The error I'm getting is
TypeError: y is null
I'm sure this is a simple syntax thing that I'm missing, but I can't for the life of me figure it out! Help!
Post Script: Both the html file and the test.js file are in the same folder.
you have to place the script at the end of the document when all the elements are created:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am a paragraph tag</p>
<h1 >I am an h1 tag</h1>
<div id="id"> I am a div tag</div>
</body>
<script src='test.js'></script>
You can wrap the content on your script using $(document).ready if you are using jQuery or window.onload if using plain javascript.

Put getElementById() at the bottom [duplicate]

This question already has answers here:
$(document).ready equivalent without jQuery
(39 answers)
Closed 8 years ago.
I have the following code
<html>
<head>
<script>
document.getElementById("txt").innerHTML = "Hello";
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
and of course the text "Hello" isn't displayed because it's before the div. However because i use egl i can put js code only on head.
Is there any way to fix this?
You need to wait for your page to be ready before your code can execute on markup in the page. For example, use window.onload handler as in the example below. There are nicer ways to do this such as jQuery methods, but this will serve as an example of what you need.
<html>
<head>
<script>
window.onload = function ()
{
document.getElementById("txt").innerHTML = "Hello";
}
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>

Very simple javascript example for getElementById. Why am I getting an error? [duplicate]

This question already has answers here:
getElementById and null - why? [duplicate]
(2 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html>
<body>
<script>
var aMessage = document.getElementById("aaa").innerHTML;
console.log(aMessage);
</script>
<p id="aaa">Hello World!</p>
</body>
</html>
When I access the document, the console error I am getting is:
Uncaught TypeError: Cannot read property 'innerHTML' of null
What am I missing?
It's because you have the script tag before the element. Try it the other way around:
<!DOCTYPE html>
<html>
<body>
<p id="aaa">Hello World!</p>
<script>
var aMessage = document.getElementById("aaa").innerHTML;
console.log(aMessage);
</script>
</body>
</html>
It's usually advised to put the script tag at the very bottom of your page. There's also a couple of events such as load and DOMContentLoaded that you can use to start your script once things have loaded

Categories

Resources