Question

我正在尝试编写一个javascript / angular js函数来实现以下功能：当用户输入一个数字时，它会告诉他们数字是太高还是太低（＆gt; 100太高）

这是我的HTML代码：

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

这是我的js代码：

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

}

});

当我在文本区域输入值时，我无法弄清楚为什么没有发生任何事情。

Answer 1

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

Answer 2

var num正在选择错误的元素（它应该是input）。您还需要此元素的value而不是元素本身。您还将keyup事件绑定到错误的元素（这也应该是input）...

＆＃13;

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

＆＃13;

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

＆＃13;

修改

您可能还希望在onchange事件触发时调用您的函数以捕获数字输入的+/-按钮点击

Answer 3

试试这个

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

Answer 4

你犯了很多错误。我试图纠正它们。你可以使用这些：

<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

您可以在输入的ng-change上实现功能，这是纯角度代码

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

控制器看起来像

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

Answer 6

您在JS中选择了错误的元素值，并且还将事件列表给错了元素，应该从输入框中获取值并调用输入框的列表

在 onchang e 中调用它，以向上和向下箭头点击工作

<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

你应该将事件监听器附加到输入，试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

响应用户输入的JavaScript函数

7 个答案: