0

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

3
  • 2
    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
    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
    Dec 2, 2017 at 17:57
  • here is a working example: jsfiddle.net/xossdv62
    – Sergej
    Dec 2, 2017 at 17:59

8 Answers 8

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);
      });
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);
  });
1
  • Oh my.. that's my problem, i get it now. Thanks, sir Dec 2, 2017 at 18:04
0

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>

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.

0

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>

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>

0

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>

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.