.Value is giving a console error in javascript

Question

I am fairly new to programming. I am fiddling around with small projects to get some experience. While I was coding, I encountered a problem. I am going to write the basic code down below. When I run the code, the console gives this error "Cannot read properties of null (reading 'value')"

function startFunction() {
  let string = document.getElementById("inputbutton").value;
  console.log(string);
}

<input id="text" placeholder="Type Something" maxlengh="50">
<button id="inputbutton " onclick="startFunction()">Submit</button>

Not sure about that dupe since the function is called on the button click. I think the space in the name is an issue: `id="inputbutton "` — 001, Sep 17 '21 at 18:27
Either way, you probably want the value from the input, not the button — Rojo, Sep 17 '21 at 18:37

score 0 · Answer 1 · 2021-09-18T16:07:47.490

You have selected the wrong element. I believe you're trying to select the

    <input>

element not the

  <button>

element. If you change

  let string = document.getElementById("inputbutton").value;

to

  let string = document.getElementById("text").value;

and it should work. The reason is that the button element doesn't support the value property. Check on w3schools' HTML DOM element table for more information. Here is the fixed code with runnable example:

function startFunction() {
  let string = document.getElementById("text").value;
  console.log(string);   
}

<input id="text" placeholder="Type Something" maxlengh="50">
<button id="inputbutton "onclick="startFunction()">Submit</button>

Here are few things to remember:

Do not load the script before the document. For example, the following code will give you an error:

<script>
document.getElementById('d').innerHTML = "Hello";
</script>
<div id="d">
</div>

To fix such problem, put the script after the HTML element you're trying to work with. The following code will not throw an error:

<div id="d">
</div>
<script>
document.getElementById('d').innerHTML = "Hello";
</script>

This is because the browser execute code line by line in the same order as it is written. For the first example, the script is executed before the

<div>

element is fully loaded. So, when the browser encounters the code, it can not find the

<div>

element by ID.

@Muhammad Ali, I have added the "Run Code Snippet" function to my code. See if there is something you're missing in your code. It works for me. — , Sep 18 '21 at 15:51

score 0 · Accepted Answer · answered Sep 17 '21 at 19:18

if you want to get the value of your input you can do this

 <input id="text" placeholder="Type Something" maxlengh="50" />
    <button id="inputbutton " onclick="startFunction()">Submit</button>

    <script>
      const textInput = document.getElementById('text')
      function startFunction() {
        let string = textInput.value
        console.log(string)
      }
     
    </script>

you can also use addEventListener

<input id="text" placeholder="Type Something" maxlengh="50" />
    <button id="inputbutton">Submit</button>

    <script>
      const textInput = document.getElementById('text')
      const button = document.getElementById('inputbutton')
      button.addEventListner('click',function(){
       let string = textInput.value
        console.log(string)
       })
     
    </script>

.Value is giving a console error in javascript

2 Answers2