Question

我使用html和js进行了一项小型学校作业我试图使用从html“form”到js var的输入，但它不起作用！当我使用“提示”

时，脚本运行正常

  <form>
        <input id="numbers" type="number"/>
    </form>
<script>
var num = document.getElementById("numbers").value;
var mid1 = 0;
var mid2 = 0;
var total = 0;
      for (var i = 1; i <=num; i+=2){
      mid1=i+mid1;}
      for (var j = 2; j <=num; j+=2){
          mid2=j+mid2;}
      total = mid1 - mid2;
alert(total);
</script>

Answer 1

问题是，一旦加载页面，您就会尝试从input元素中获取值。您让用户没有时间使用它！

解决此问题的最简单方法是使用附加到输入元素的输入事件处理程序。

这是一个解决方案：

<form>
    <input id="numbers" type="number"/>
</form>
<p id="output">
</p>
<script>
    function myFunc() {
        var num = document.getElementById("numbers").value;
        var mid1 = 0;
        var mid2 = 0;
        var total;
        for (var i = 1; i <= num; i += 2) {
            mid1 = i + mid1;
        }
        for (var j = 2; j <= num; j += 2) {
            mid2 = j + mid2;
        }
        total = mid1 - mid2;
        document.getElementById("output").innerHTML = total;
    }
    document.getElementById("numbers").addEventListener("input", myFunc);
</script>

Answer 2

在输入框中输入任何内容之前，您的javascript正在执行。输入内容后，您需要执行代码。下面我展示了使用点击事件来触发计算

<form>
   <input id="numbers" type="number"/>
   <button id="calc">Calculate</button>
</form>
<script>
var btn = document.getElementById("calc");
btn.addEventListener("click",calc,false);
function calc(event){
   event.preventDefault();
   var num = document.getElementById("numbers").value;
   var mid1 = 0;
   var mid2 = 0;
   var total = 0;
   for (var i = 1; i <=num; i+=2){
      mid1=i+mid1;
   }
   for (var j = 2; j <=num; j+=2){
      mid2=j+mid2;
   }
   total = mid1 - mid2;
   alert(total);
}
</script>

Answer 3

你的脚本是正确的。您只需在输入框中输入值后触发脚本即可。一旦网页加载，它将被视为0。

<button onclick="doit()">click here</button>
<script>
function doit(){
var num = document.getElementById("numbers").value;

var mid1 = 0;
var mid2 = 0;
var total = 0;
  for (var i = 1; i <=num; i+=2){
  mid1=i+mid1;}
  for (var j = 2; j <=num; j+=2){
      mid2=j+mid2;}
  total = mid1 - mid2;
alert(total);
}
</script>

Answer 4

我相信，你在循环内部存在问题因为＆＃34; num＆＃34;本身就是一个值，你必须在它的长度上循环。请查看以下更新的代码。

<form>
        <input id="numbers" type="number"/>
    </form>
<script>
var num = document.getElementById("numbers").value;
var mid1 = 0;
var mid2 = 0;
var total = 0;
      for (var i = 1; i <=num.length; i+=2){
      mid1=i+mid1;}
      for (var j = 2; j <=num.length; j+=2){
          mid2=j+mid2;}
      total = mid1 - mid2;
alert(total);
</script>

使用html框值到js

4 个答案: