How to call function when input value changes?

Question

I have tried to find a way to call a function when the value of the input changes, but so far I haven't found anything. All of the things I have tried seemed to work but didn't. Html:

var funds = 500;
document.getElementById("submit").onclick = function() {

}

function AP() {
  if (document.getElementById("p").checked) {
    document.getElementById("AP").innerHTML = "%";
  } else {
    document.getElementById("AP").innerHTML = "";
  }
}
//right here I'd like the function to call.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rng Crypto</title>
</head>

<body>
  <header>
    <h1>Crypto ran from randomness!</h1>
  </header>
  <div>
    <input type="radio" name="AP" id="a" onchange="AP()" checked>Absolute<input type="radio" name="AP" id="p" onchange="AP()">Percent<br>
    <input type="number" id="input" HERE TO ADD THINGY>
    <p id="AP" style="display:inline;"></p><br>
    <button id="submit">Submit</button>
  </div>
  <script src="RngCrypto.js"></script>
</body>

</html>

The things that I have tried are:

<input type="number" id="input" onchange="input()">

<input type="number" id="input" oninput="input()">

<input type="number" id="input" onkeyup="input()">

document.getElementById("input").onchange=input();

document.getElementById("input").oninput=input();

Use `onchange="..."` to run a function when the input changes. You seem to know about this already, since you used it with the radio buttons. — Barmar, Apr 27 '22 at 14:32
Usually you set a value attribute to both type-radio elements (having the name=AP). In your function you could then compare the value — Luckyfella, Apr 27 '22 at 14:33
Radio buttons work more like a connected group. No matter which of the radio buttons (having the same name) you select, the radio is "checked" - but the value changes depending of which one you selected. — Luckyfella, Apr 27 '22 at 14:37
@Barmar I know this and have tried this very much, but didn't work any of the times. — , Apr 27 '22 at 15:06
@Barmar I have tried oninput, onchange, onkeyup, adding it through js, and maybe some more that I don't remember right now. — , Apr 27 '22 at 15:10
Show the actual code in the question, so we can see what you're doing wrong. — Barmar, Apr 27 '22 at 15:15
The last two lines should not have `()` after `input`. See https://stackoverflow.com/questions/29526556/javascript-onclick-function-is-called-immediately-not-when-clicked — Barmar, Apr 27 '22 at 16:17
But the first 3 should have worked. Add the code for `input()`. Make it an executable stack snippet, like I did for your original code. — Barmar, Apr 27 '22 at 16:18

Kuldeep J · Answer 1 · 2022-04-27T16:06:52.690

    
 const inputEle =   document.querySelector("#input"); 
 inputEle.addEventListener('input', function(e) {
          console.log(e.target.value);
    })

<input type="text" id="input">

Have you tried adding the 'change' event on the input element.
Edit: adding 'input' eventListener, is one more way to achieve this result.

(refer following code)


    var funds = 500;
    document.getElementById("submit").onclick = function() {

    }

    function AP() {
      if (document.getElementById("p").checked) {
        document.getElementById("AP").innerHTML = "%";
      } else {
        document.getElementById("AP").innerHTML = "";
      }
    }
    //right here I'd like the function to call.
    document.queryselector("#input").addEventlistener('change', function(e) {
          console.log(e.target.value;)
    })

Can you merge this into the stack snippet so that we can run it? — Barmar, Apr 27 '22 at 15:15

Luckyfella · Answer 2 · 2022-04-27T15:34:58.483

When I got you right this is basically what you are looking for:

<input class="js-radio-button" type="radio" name="ab" value="absolute"> Absolute<br>
<input class="js-radio-button" type="radio" name="ab" value="percent"> Percent<br>
<button class="js-check-selection">CHECK</button>
<div>
    <span>Result is:</span> <span id="result"></span>
</div>

in your javascript you have:

function checkSelectedRadio() {
  // get your radios having the name 'ab'
  const radios = document.querySelectorAll('input[type=radio][name=ab]');

  // reset result container
  document.getElementById('result').innerHTML = '';

  // loop through the radios
  for (let i = 0; i < radios.length; i += 1) {
    // check for each radio if it was selected
    if (radios[i].checked) {
      // set the value of the selected radio to your result container
      document.getElementById('result').innerHTML = `Value: ${radios[i].value}`;

      // if you need more logic:
      if (radios[i].value === 'absolute') {
        // do something here if 'absolute' was checked
      } else if (radios[i].value === 'percent') {
        // do something here if 'percent' was checked
      }
    }
  }
}

// get your button to check radio status like this or fire the function above by your onchange handler
const checkButton = document.querySelector('.js-check-selection');
checkButton.addEventListener('click', checkSelectedRadio);

EDIT after reading your comment:

To detect change of your input field it works like this:

<input type="number" id="input" value="1">

In your JS:

const field = document.querySelector('#input');

function inputCheck() {
  console.log('input changed');
  // or do something else
}

field.addEventListener('change', inputCheck);

It's not the radio buttons that are wrong, they work fine. But it is the number input below it. — , Apr 27 '22 at 15:23

How to call function when input value changes?

2 Answers2