事件监听器只循环一次答案

【问题标题】：Event listener only makes loop loop once事件监听器只循环一次
【发布时间】：2019-10-16 18:56:13
【问题描述】：

E：不知道将数字属性分配给输入框仍会将其作为字符串传递，谢谢您的回复！。

我的事件监听器使它只循环通过我的 for 循环一次然后停止。

现在我确信解决方案很简单，但我似乎找不到问题所在。

如果您只是运行该函数并手动输入值，它就可以正常工作。

startButton.addEventListener("click",function(){
           floorFizz = document.getElementById("floor").value;
           capFizz = document.getElementById("cap").value;
           incrementFizz = document.getElementById("increment").value;
           FizzBuzz(floorFizz,capFizz,incrementFizz);
       });

function FizzBuzz(floor,cap,increment){
    for(let i=floor; i<cap; i+= increment){
        console.log("iteration")
        if(i%3 === 0 && i%5 === 0){
            console.log(i + "=FizzBuzz")
        }
        else if(i%3 === 0){
            console.log(i + "=Fizz")
        }
        else if(i%5 === 0){
            console.log(i + "=Buzz")
        }
        else{
            console.log(i)
        }
    }
}

<button id="startButton">Start</button>
<div id=floor>1</div>
<div id=cap>100</div>
<div id=increment>1</div>

没有错误信息只会循环一次。


let floorVal = document.createElement('input');
        floorVal.setAttribute('type','number');
        floorVal.id = "floor";
        floorVal.setAttribute('placeholder','Starting number')
        parent.appendChild(floorVal);

【问题讨论】：

下限、上限和增量的值是多少？
第 1 层上限 100 增量 1
let floorVal = document.createElement('input'); floorVal.setAttribute('type','number'); floorVal.id = "floor"; floorVal.setAttribute('placeholder','Starting number') parent.appendChild(floorVal);
console.log(typeof floorFizz, typeof capFizz, typeof incrementFizz)
我已将其转换为代码 sn-p 为您服务。我相信这与您处理数字的方式有关。你是在传递整数吗？

标签： javascript loops dom-events

【解决方案1】：

将值转换为数字...

floorFizz = Number(document.getElementById("floor").value);
capFizz = Number(document.getElementById("cap").value);
incrementFizz = Number(document.getElementById("increment").value);

【讨论】：

这行得通，我不知道为什么我将输入类型声明为数字。
没关系，value还是字符串。

【解决方案2】：

一旦你使用parseInt 确保你得到的是数字而不是字符串，似乎工作正常：

document.getElementById('startButton').addEventListener("click",function(){
           floorFizz = parseInt(document.getElementById("floor").value);
           capFizz = parseInt(document.getElementById("cap").value);
           incrementFizz = parseInt(document.getElementById("increment").value);
           FizzBuzz(floorFizz,capFizz,incrementFizz);
       });
function FizzBuzz(floor,cap,increment){
    for(let i=floor; i<cap; i+= increment){
        console.log("ittaration")
        if(i%3 === 0 && i%5 === 0){
            console.log(i + "=FizzBuzz")
        }
        else if(i%3 === 0){
            console.log(i + "=Fizz")
        }
        else if(i%5 === 0){
            console.log(i + "=Buzz")
        }
        else{
            console.log(i)
        }
    }
}

Floor: <input type="number" id="floor" value="0" /><br/>
Cap: <input type="number" id="cap" value="100" /><br/>
Inc: <input type="number" id="increment" value="1"/><br/>

<button id="startButton">Start</button>

【讨论】：