时间戳

首页 > 解决方案 > For循环似乎在某些范围内不起作用？

javascript - For循环似乎在某些范围内不起作用？

问题描述

我有这个问题，在某些数字范围之间运行 for 循环不起作用？循环实际上只是不执行，我真的无法解释为什么会在某些数字范围内发生这种情况，而在其他数字范围内则不然。似乎这只发生在上限值< 100，下限值> = 0的范围内。例如 20-100 不起作用，但 40-90 起作用。我删除了很多不需要包含的代码（主要是值验证的东西），因为我唯一真正的问题是为什么这个循环不起作用。

我真的不知道该尝试什么，我不明白为什么调用 createTable(20,100) 不会执行循环，而 createTable(40,90) 会...

我还应该提到，这只发生在单击“转换”按钮时。

要自己尝试，请输入 20 作为下限值，输入 100 作为上限值，选择“摄氏度 → 华氏度”并单击转换。

var lowerValue = document.getElementById("lower");
var upperValue = document.getElementById("upper");
var celsiusCheckBox = document.getElementById("celsius");
var fahrenheitCheckBox = document.getElementById("fahrenheit");
var submitButton = document.getElementById("submit");




function onButtonClicked() {
   createTable(lowerValue.value, upperValue.value)
}


function createTable(lower, upper) {
    for(let i = lower; i <= upper; i++ ) {
        console.log(i);
      
    }
}

function checkCheckBox(element) {
    if (element.id == "celsius" && fahrenheitCheckBox.checked) {
        fahrenheitCheckBox.checked = false;
    } else if (element.id == "fahrenheit" && celsiusCheckBox.checked) {
        celsiusCheckBox.checked = false;
    }
}
<!DOCTYPE html>
<html lang="en">
<label>Lower value</label>
<input type="text" id="lower">
<label>Upper value*</label>
<input type="text" id="upper">

<label>Celsius &#8594; Fahrenheit</label>
<input type="checkbox" id="celsius" onclick="checkCheckBox(this)">
<label>Fahrenheit &#8594; Celsius</label>
<input type="checkbox" id="fahrenheit" onclick="checkCheckBox(this)">

<button type="button" id="submit" onclick="onButtonClicked()">Convert</button>

<body>
</body>
</html>

任何帮助将不胜感激。

标签： javascript

解决方案

发生这种情况是因为您将字符串传递给函数，"100"而<不是"20"因为它以1.

采用

function onButtonClicked() {
   const lower = parseInt(lowerValue.value, 10);
   const uppdate = parseInt(upperValue.value, 10);

   createTable(lowerValue.value, upperValue.value)
}

更新的片段

var lowerValue = document.getElementById("lower");
var upperValue = document.getElementById("upper");
var celsiusCheckBox = document.getElementById("celsius");
var fahrenheitCheckBox = document.getElementById("fahrenheit");
var submitButton = document.getElementById("submit");




function onButtonClicked() {
  const lower = parseInt(lowerValue.value, 10);
  const upper = parseInt(upperValue.value, 10);
  
  createTable(lower, upper)
}


function createTable(lower, upper) {
  for (let i = lower; i <= upper; i++) {
    console.log(i);

  }
}

function checkCheckBox(element) {
  if (element.id == "celsius" && fahrenheitCheckBox.checked) {
    fahrenheitCheckBox.checked = false;
  } else if (element.id == "fahrenheit" && celsiusCheckBox.checked) {
    celsiusCheckBox.checked = false;
  }
}
<label>Lower value</label>
<input type="text" id="lower">
<label>Upper value*</label>
<input type="text" id="upper">

<label>Celsius &#8594; Fahrenheit</label>
<input type="checkbox" id="celsius" onclick="checkCheckBox(this)">
<label>Fahrenheit &#8594; Celsius</label>
<input type="checkbox" id="fahrenheit" onclick="checkCheckBox(this)">

<button type="button" id="submit" onclick="onButtonClicked()">Convert</button>

推荐阅读