How to call function when input value changes?-CodePudding

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();

CodePudding user response：

    
 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;)
    })

CodePudding user response：

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

<input  type="radio" name="ab" value="absolute"> Absolute<br>
<input  type="radio" name="ab" value="percent"> Percent<br>
<button >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);