Reputation: 17
I want to show the value of an in my console. But when I try to console.log the value, it says that value of 'null' can't be read
I have tried making this in my HTML file with but it doesn't work too
Here is my code :
var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)
grayscale.onchange = function(){
console.log(grayscale.value)
}
<input type='range' id='grayscale' min='0' max='100'>
And it shows
Uncaught TypeError: Cannot read property 'value' of null
at main.js:3
Upvotes: 0
Views: 12481
Reputation: 1468
Analyzing statements won't usually work with null, especially with less lenient JavaScript Frameworks probably. You just have to add a negator (!) in front instead to make it work .
let variable = null
if(!variable) {
console.log("computing")
}
Either that or you might be making the common mistake of going one step deeper than you should be.
Upvotes: 0
Reputation: 799
Try this instead:
const grayscale = document.getElementById('grayscale');
grayscale.addEventListener('change', ({target}) => console.log(target.value));
ps: forgot to mention, when launch script, set attribute defer, like below:
<script defer src="./index.js"></script>
Upvotes: 0
Reputation: 1987
Put the Javascript after the element. If grayscale is null, it is not part of the DOM yet. Put the Javascript file or snippet in the body section at the very end after your element.
<html>
....
<body>
....
<script type="text/javascript" src="theJs.js"></script>
</body>
</html>
Or you can use embedded javascript:
<input type='range' id='grayscale' min='0' max='100'>
<script>
var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)
grayscale.onchange = function(){
console.log(grayscale.value)
}
</script>
</body>
Upvotes: 0
Reputation: 12152
Use window.onload
and call a function, which performs all the tasks you want. It will wait till window loads and then your function will be executed. Right now it is getting executed before the html is getting rendered, means it is accessing the value of the slider before even it is loaded. So you get the error.
window.onload=function(){var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)
grayscale.onchange = function(){
console.log(grayscale.value)
}
}
<input type='range' id='grayscale' min='0' max='100'>
Upvotes: 0
Reputation: 890
Your JavaScript is running before the DOM is ready. Try wrapping it in an event listener like:
document.addEventListener("DOMContentLoaded", function(event) {
var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)
grayscale.onchange = function(){
console.log(grayscale.value)
}
}
Upvotes: 1