响应用户输入的JavaScript函数

Question

I am trying to write a javascript/angular js function to achieve the following: when a user enters a number, it will tell them if the number is too high or low (> 100 is too high)

here is my html code:

<div>
    <p id="num">Number : <input type="number"> </p>
    <p id="demo" onkeyup="numberToHigh()"> </p>
</div>

here is my js code:

function numberToHigh(){
var number = document.getElementById('num');
var message = document.getElementById('demo');
if (number > 100) {
    message.innerHTML = "number too high";
}else{
    message.innerHTML = "number ok";
}

}

});

I can't figure out why nothing is happening when i enter a value into the text area.

Answer 1

您应该将事件侦听器附加到input元素，而不是p元素。

Answer 2

var num is selecting the wrong element (it should be the input ). You also need the value of this element rather that the element itself. You are also binding the keyup event to the wrong element (this should also be the input )...

 function numberToHigh(){ var number = document.getElementById('num').value; var message = document.getElementById('demo'); console.log(number) if (number > 100) { message.innerHTML = "number too high"; }else{ message.innerHTML = "number ok"; } } 

 <div> <p>Number : <input id="num" type="number" onchange="numberToHigh()" onkeyup="numberToHigh()"> </p> <p id="demo"> </p> </div> 

EDIT

You may want to also call your function when the onchange event fires to capture the +/- button clicks of the number input

Answer 3

尝试这个

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

Answer 4

You made many mistakes. I tried to correct them. You can use these :

<div>
    <p id="num">Number : <input id="numValue" type="number" /> </p>
    <p id="demo"> </p>
</div>



$("#numValue").keyup(function() {
    var number = document.getElementById('numValue').value;
    var message = document.getElementById('demo');
    if (number > 100) {
        message.innerHTML = "number too high";
    }else{
        message.innerHTML = "number ok";
    }
});

Answer 5

You can implement function on ng-change of input, this is pure angular code

     <div>
        <p id="num">Number : <input type="number" ng-model="number" ng-change="numberToHigh()"> </p>
/div>

Your controller looks like

   $scope.numberToHigh = function (){
      if ($scope.number > 100) {
             // do your work    
        }
       else{
        // do your work
        }    
      }

Answer 6

You are selecting wrong element value in JS and also given the event lister to wrong element , should get the value from the input box and invoke the lister of input box

Invoke it in onchang e to work it in up and down arrow clicks

<script>
function numberToHigh(){
var number = document.getElementById('num').value;
var message = document.getElementById('demo');
if (number > 100) {
    message.innerHTML = "number too high";
}else{
    message.innerHTML = "number ok";
}

}
</script>

<div>
    <p >Number : <input id="num" onchange="numberToHigh()" onkeyup="numberToHigh()" type="number"> </p>
    <p id="demo"> </p>
</div>

Answer 7

You should attach event listener to input, try this

 function numberToHigh(){ var number = document.getElementById('input_number'); var message = document.getElementById('demo'); if (number.valueAsNumber > 100) { message.innerHTML = "number too high"; } else{ message.innerHTML = "number ok"; } }; 

 <div> <p id="num">Number : <input id="input_number" onmousedown="numberToHigh()" onkeyup="numberToHigh()" type="number"> </p> <p id="demo" > </p> </div>