Lucas Mahé
Lucas Mahé

Reputation: 17

How to fix 'Cannot read property 'value' of null' with an input in Javascript

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

Answers (5)

Ahmedakhtar11
Ahmedakhtar11

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

Max
Max

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

Rik
Rik

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

ellipsis
ellipsis

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

Michael Angstadt
Michael Angstadt

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

Related Questions