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.
I am trying to make my own version of jQuery. I am using this code so far, to test my selectors:
js(".hide");
function js(selector){
var applyTo = document.querySelector(selector);
applyTo.style.color = 'red';
}
However, this does not work, and the error console said: Uncaught TypeError: Cannot read property 'style' of null
Why is applyTo null?
To make it not fail in case the selector doesn't get you any element:
function js(selector){
var applyTo = document.querySelector(selector);
if(applyTo) { applyTo.style.color = 'red'; }
}
Make sure it's called only after the DOM has loaded.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 months ago.
document.querySelector('.number');
document.querySelector('.check').addEventListener('click', function () {
const guess = Number(document.querySelector('.guess').value);
console.log(guess, typeof guess);
if (!guess) {
document.querySelector('.message').textContent = 'No Number!';
}
});
I don't know what's wrong with the addEventListener, Can anyone please help me?Thank you
Looks like you are trying to access an element that is null. The dot operator throws an error when it's trying to access null.addeventlistener(...)
I am not sure if there is anything wrong with your HTML as its not been shared here. But my guess is it has to do with the HTML classes.
For debugging purposes print your document.querySelector('.check') and see what it consoles and based on that take it from there.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Javascript element is null [duplicate]
(3 answers)
Closed 6 years ago.
In a scrip I try to get the width of an element like so:
var container = document.getElementById('content');
var cw = container.clientWidth;
But it gives me this error in the console:
Uncaught TypeError: Cannot read property 'clientWidth' of null
Executing the same statements in the console however, produces the desired value.
How is that possible?
Screenshot of the console:
This script is loading before the dom has finished loading (or in particular the div#content). ensure that this script is being inserted as the last element of the body (not in the head) or if div#content is being dynamically created, you may want to invest in jQuery's $(document).ready function
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.
I am struggling with a little javascript.
I have these four lines:
var footer = document.getElementById('footer');
var cookieBanner = document.createElement('div');
cookiebanner.className = "cookieBanner";
footer.appendChild(cookiebanner);
But in console I get
Uncaught TypeError: Cannot read property 'appendChild' of undefined
If I do the same in console, it works. Why would that be?
var footer = document.getElementById('footer'); is returning undefined. Therefore when you try and call appendChild on undefined, you get:
Uncaught TypeError: Cannot read property 'appendChild' of undefined
If there is an element with that ID on your page, make sure your page is being rendered before this script is being ran.
This question already has answers here:
"document.getElementByClass is not a function"
(12 answers)
Closed 9 years ago.
I have the following line in my Javascript code
window.onload = function () { document.getElementsByClass("maintable")[0].width = "200%"; }
When I Try this, I get an error in Google Chrome saying "Uncaught TypeError: Object #{HTMLDocument} has no method 'getElementsByClass'" Can anyone tell me how to fix this?
It should be getElementsByClassName, not getElementsByClass.
Similar question here:
It should be getElementsByClassName:
window.onload = function () { document.getElementsByClassName("maintable")[0].width = "200%"; }
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 9 years ago.
In this code:
<header class="alg">Some text</header>
<script>
var header = document.getElementsByClassName("alg");
header.style.color = 'red';
</script>
after run it. I got from log:
TypeError: header_m.style is undefined
What do I do wrong?
getElementsByClassName returns multiple elements.
Therefore, you are accessing it improperly. What you want, in this case, is:
header[0].style.color = 'red';
// ^ [0] will get the first element with the class,
// which is in this case your is header element. [1] would get the second, etc.
jsFiddle.