Why does jQuery or a DOM method such as getElementById not find the element?
The element you were trying to find wasn’t in the DOM when your script ran.
The position of your DOM-reliant script can have a profound effect on its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (generally) executed as they're encountered. This means that order matters. Typically, scripts can't find elements that appear later in the markup because those elements have yet to be added to the DOM.
Consider the following markup; script #1 fails to find the <div>
while script #2 succeeds:
<script>
console.log("script #1:", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
console.log("script #2:", document.getElementById("test")); // <div id="test" ...
</script>
why does DOM method such as getElementById not find the element?
for
attribute's value must be the id of an element and not theclass
orname
of the element.
Ref: https://www.w3schools.com/tags/att_label_for.asp
You have used an extra
"
in<label for="rdb_disease" ">
.Added an id
rbd_disease
name
correction for<input>
tag.diseease
=>disease
Used ternary operator.
Created variable
disease_panel
.Changed the default
display
ofdisease_panel
tonone
.
<div>
<label for="rdb_disease">Are you okay?</label>
<div class="col-sm-9" class="rdb_disease" id="rdb_disease">
<input type="radio" id="no" name="rdb_disease" value="0">
<label for="no">No</label>
<input type="radio" id="yas" name="rdb_disease" value="1">
<label for="yes">yes</label>
</div>
</div>
<div id="disease_panel" style = "display : none">
<p>hello</p>
</div>
<script>
var rdb_disease = document.getElementById("rdb_disease");
var disease_panel = document.getElementById("disease_panel");
function rdb_visible_hide_panel(rdb_name,panel_name) {
var radio = rdb_name.getElementsByTagName("input");
panel_name.style.display = radio[1].checked ? "block" : "none";
}
rdb_disease.addEventListener("change", function() {
rdb_visible_hide_panel(rdb_disease,disease_panel);
});
</script>
Javascript can't find element by id?
The problem is that you are trying to access the element before it exists. You need to wait for the page to be fully loaded. A possible approach is to use the onload
handler:
window.onload = function () {
var e = document.getElementById("db_info");
e.innerHTML='Found you';
};
Most common JavaScript libraries provide a DOM-ready event, though. This is better, since window.onload
waits for all images, too. You do not need that in most cases.
Another approach is to place the script tag right before your closing </body>
-tag, since everything in front of it is loaded at the time of execution, then.
Javascript: Can't get element using getElementById
The reason for this is that scripts in the head load before the page is rendered. This means your content is not yet rendered and therefore not a part of document
.
If you want to see this work, try moving your script below the element renders, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
A more standardized way of doing this is with events. Many people use jQuery but it can be done with plain js. This would mean changing your script like this:
<script type="text/javascript">
function WinLoad() {
var ssio = document.getElementById('ssio');
ssio.innerHTML = "It finally works!";
}
window.onload = WinLoad;
</script>
This way you can still leave it in the <head>
.
Also, using .html
is from jQuery. It is generally used as .html(content)
. If you want to use the plain javascript version use .innerHTML = content
.
I mention jQuery so much because it is a highly used API. This quote is from their site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Getting Javascript error: Uncaught TypeError: document.getElementById(...) is null
add the script to the bottom instead:
like this:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="game-container">
<div id="card-column" name="card-column"></div>
<div id="game-column" name="game-column"></div>
</div>
<script>
document.getElementById("game-column").innerHTML = "test";
</script>
</body>
</html>
document.getElementById not behaving as expected
A <template>
's children don't get rendered - they aren't really on the page. As MDN says:
Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the
<template>
element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
It doesn't have children in the DOM.
console.log(document.querySelector('template').children.length);
<template>
<p>foo</p>
</template>
Related Topics
Toggle Show/Hide Div With Button
How to Do Fade-In and Fade-Out With JavaScript and Css
How to Retrieve the Display Property of a Dom Element
Set CSS Property in JavaScript
How to Change Style of Iframe Content Cross-Domain
Trigger CSS Transition on Appended Element
How to Change a Class CSS With a Greasemonkey/Tampermonkey Script
Turn a Number into Star Rating Display Using Jquery and Css
Why JavaScript This.Style[Property] Return an Empty String
How to Remove a Style Added With .Css() Function
Show Loading Image While $.Ajax Is Performed
Get a CSS Value from External Style Sheet With JavaScript/Jquery
Can You Control Gif Animation With JavaScript
How to Detect a Click Outside an Element
How to Return Value from an Asynchronous Callback Function