When using document.getElementById, it's not working properly [duplicate] - javascript

This question already has answers here:
JavaScript getElementByID() not working [duplicate]
(3 answers)
Closed 7 years ago.
The Problem
I'm trying to display the output of a function to a div, but i can't figure out why it isn't displaying. How can i fix this so that it displays properly?
What i've tried so far
I've copied a document.getElementById statement from another codeblock i wrote that is functioning , and checked it for any typos etc. All seems well there.
I googled innerHTML to be sure that I was using it correctly.
Also changed the document.etc line to document.write to ensure the function was working properly, it output properly.
My Code
<html>
<head>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
parameters("coding" , "coffee");
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>

The problem is that you're trying to use the div#output before it's even loaded by the browser.
There are two simple solutions for this:
First
Put the <script> tag after the div#output, so it will be already loaded.
<html>
<head>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
parameters("coding" , "coffee");
</script>
</body>
</html>
Second
Put your Javascript code inside the DOMContentLoaded event, so it will only be called after all the DOMElements are loaded in your page.
<html>
<head>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
document.addEventListener('DOMContentLoaded', function() {
parameters("coding" , "coffee");
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>

Related

Hiding elements in HTML via JQuery, but not working [duplicate]

This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Html script tag - can script be added when src is used [duplicate]
(4 answers)
Closed 11 months ago.
Trying to currently write a function that hides an HTML table element whenever an option is chosen on a dropdown menu. However, trying to test this doesn't seem to yield results.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
$(function () {
$(".testClass").hide();
});
</script>
And the HTML:
<div class="testClass">Test</div>
Close original the script tag used for using src, and open another one for the inline script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(function () {
$(".testClass").hide();
});
</script>
</head>
<body>
<h2>Some heading</h2>
<div class="testClass">Test</div>
</body>
You are not supposed to put anything between the jquery tags.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Then create another script inside the body of your application. Here is an example from w3schools:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The example above shows how to hide an element using jQuery with a click of a button.
However, I am not sure it is the best way to hide an element in Angular. You can do it with an example from here:
Angular 2 Show and Hide an element
Please look at gentiane answer.

reloading a div with javascript without reloading the whole page

hi i want to reload a div when i click on a button, am looking for simplest code using JavaScript, i tried several codes but none of them worked,this is my last script and it didn't work either
this is my code
You can use the html() method in jquery to get the content as well as modify the content of a div.
Find the working example here:
https://jsfiddle.net/dke1Lw5n/
Find the code below:
<html>
<head>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn_click').on('click', function () {
$('#publish').html($('#publish').html() + 1);
});
});
</script>
<body>
<div id="publish">5</div>
<button type="button" id="btn_click">clickme</button>
</body>
</html>

document.getElementById is not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
document.getElementById() doesn't work? [duplicate]
(7 answers)
Closed 7 years ago.
im new to javascript and want to fill a div with some text. but it doesn't work.
in the documentation this is the common way to do this. but, why doesn't work this for me?
my code is
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
You need to move your script to the end of your HTML. Right now, you're executing the script BEFORE your HTML has been parsed so the document is empty and thus document.getElemntById('mytest') does not find anything.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>
See this other answer for a lot more discussion of this issue and other options if you don't want to move your <script> tag:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
thats because, in your document, the javascript is load at the first, but the div with the id mytest is not loaded at this moment.
you have 2 options to get this working:
first: say javascript to wait until the dom is loaded completly
window.onload=function(){
document.getElementById('mytest').innerHTML="hey";
}
second:
put your script code at the bottom, so the javascript is loaded at least.
but i would prefer the first solution.
best
Try in this way
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
</body>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</html>
Js fiddle

javascript code is not executing correctly locally, but works in JS Fiddle [duplicate]

This question already has answers here:
Works in jsFiddle but not on live site
(1 answer)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I have a very simple HTML file that looks like this:
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="mainScript.js"></script>
</head>
<body>
<button id = "theButton" type="button">Click Me!</button>
</body>
</html>
mainScript.js looks like this:
$("#theButton").click(function() {
alert( "Handler for .click() called." );
});
Nothing happens when I click though. If I put an alert into the JS file it will happen. If I run that snippet of JS in the console, then when I click the button it will work. I've tested that jQuery is loaded, and it is. I've also put this code in JS Fiddle and it works (http://jsfiddle.net/ds59ruvu/). What stupid thing am i doing locally that's preventing this from working?
Wrap your code inside ready handler:
$(document).ready(function(){
// your code here
});
OR,
$(function(){
//your code here
});
OR, move your script file before the closing of body:
<html>
<head>
</head>
<body>
<button id = "theButton" type="button">Click Me!</button>
<script src="jquery-1.11.1.min.js"></script>
<script src="mainScript.js"></script>
</body>
</html>
You should wrap your code with $(document).ready:
$(document).ready(function()
{
$("#theButton").click(function()
{
alert( "Handler for .click() called." );
});
});
The problem is in fact, that script is executed before element with id "theButton" is loaded, so you can't select it using $("#theButton").

HTML : Unable to execute code in <script> block, but able to run in console [duplicate]

This question already has answers here:
getElementById() returns null even though the element exists [duplicate]
(5 answers)
Closed 8 years ago.
Here is my code :
<html>
<head>
<script>
document.getElementById("id").onclick = function(){
alert();
}
</script>
</head>
<body>
<label id="id">A label</label>
</body>
</html>
It is simple, but I can't get it to work.
When I copied the code inside <script> and ran it at console, it worked perfectly.
The onclick event isn't firing because the element doesn't exist at the time you bind the click event (DOM isn't loaded yet).
To fix this you can put the script before you close the body tag (1)
or wrap your code in a DOM loaded event (2).
1)
<html>
<head>
</head>
<body>
<label id="id">A label</label>
<script>
document.getElementById("id").onclick = function(){
alert();
}
</script>
</body>
</html>
2)
window.onload = function () {
document.getElementById("id").onclick = function(){
alert();
}
}

Categories