Why I can't get input value in my javascript code

Question

I can't get the value of selected Id.

Here's the html and javascript

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <input id="input">
  <button id="button" type="button" name="button">Search</button>

  <script>
    const der = document.getElementById('input').value;

    document.getElementById('button').addEventListener('click',
      function() {
        alert(der);
      });
  </script>

</body>

</html>

I tested it on chrome, opera, and firefox. Nothing work. I have used varalso instead of const, that dont work too.

I want to get the input value of the Id I selected. I really can't see any problem in the code

Your 'input' field is still empty at the time your javascript gets executed. Thus, der is an empty string. Try evaluating document.getElementById('input').value within your click listener function :) — ccjmne
– ccjmne, Commented Dec 2, 2017 at 17:56
Because when the code runs the value is not defined. You need to pick up the value within the function. — Andy
– Andy, Commented Dec 2, 2017 at 17:57

Grim Reaper · Accepted Answer · 2017-12-02 17:53:27Z

2

const der = document.getElementById('input').value;

This is your problem. You are getting the value of the input field before anything is written in it. Try doing it like this:

document.getElementById('button').addEventListener('click',
      function() {
        const der = document.getElementById('input').value;
        alert(der);
      });

answered Dec 2, 2017 at 17:53

Grim Reaper

5614 gold badges7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jarmod · Accepted Answer · 2017-12-02 17:57:03Z

0

You need to move the assignment to der into the click handler. At present, der is being evaluated when the page is loaded, not when the button is clicked.

  document.getElementById('button').addEventListener('click',
  function(){
    const der = document.getElementById('input').value;
    alert(der);
  });

answered Dec 2, 2017 at 17:57

jarmod

79.7k18 gold badges132 silver badges137 bronze badges

1 Comment

arman rozika Over a year ago

Oh my.. that's my problem, i get it now. Thanks, sir

JMP · Accepted Answer · 2017-12-02 17:57:50Z

der is set when the code is first run, and given the empty value. Reset it when the button is clicked.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <input id="input">
  <button id="button" type="button" name="button">Search</button>

  <script>
 

    document.getElementById('button').addEventListener('click',
      function() {
        const der = document.getElementById('input').value;
        alert(der);
      });
  </script>

</body>

</html>

xavdid · Accepted Answer · 2017-12-02 17:58:28Z

0

Your issue is that your code runs immediately on page load. Since its empty when the page loads, the variable is empty (which you can verify by typing der in the console, it's not an error, but not a value).

You can fix it by moving the variable assignment info the function, so it checks when you're ready.

answered Dec 2, 2017 at 17:58

xavdid

5,2923 gold badges27 silver badges36 bronze badges

Comments

Patrick Hund · Accepted Answer · 2017-12-02 17:58:41Z

You script doesn't work, because you get the value from the input field before it is filled out and then alert that value when the button is clicked, instead of the current value.

The solution is to move the line that gets the value into the callback function that is called when you click the button:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <input id="input">
  <button id="button" type="button" name="button">Search</button>

  <script>
    document.getElementById('button').addEventListener('click',
      function() {
        const der = document.getElementById('input').value;
        alert(der);
      });
  </script>

</body>

</html>

Nilesh Lathe · Accepted Answer · 2017-12-02 18:01:48Z

0

Try this code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <input id="input" type="text">
  <button id="button" type="button" name="button">Search</button>

  <script>
    document.getElementById('button').addEventListener('click',
      function() {
        alert(document.getElementById('input').value);
      });
  </script>

</body>

</html>

answered Dec 2, 2017 at 18:01

Nilesh Lathe

1525 bronze badges

Comments

tritterskamp · Accepted Answer · 2017-12-02 18:04:09Z

Your code is storing the value of the input as soon as the script executes, before any interaction with the form input occurs. One solution could be to store reference to the input in your const der and then call der.value inside of your click event.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <input id="input">
  <button id="button" type="button" name="button">Search</button>

  <script>
    const der = document.getElementById('input');

    document.getElementById('button').addEventListener('click',
      function() {
        alert(der.value);
      });
  </script>

</body>

</html>

rayinla · Accepted Answer · 2017-12-02 18:06:59Z

When working with the DOM, you want to get value from the input field. The button is just your way of catching the event. This is why we use event listeners. Once the event is triggered, the program knows to retrieve value based on what you tell it to retrieve.

So, you should rewrite your event like this:

document.getElementById('button').addEventListener('click',
   function() {
      let der = document.getElementById('input').value;
      //Now you can call some async code here to "play" with this value
  });

Note: I used let because I don't see the reason to use const if this value will change depending on the user's input.

Collectives™ on Stack Overflow

Why I can't get input value in my javascript code

8 Answers 8

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Related