JavaScript if 和 else if 语句无法正常工作

Question

我有一个 input type='number' 和一个指示 function testfun() 的按钮以及函数中的一个 if 语句，该语句应该验证数字是否在范围内并提供明确的说明。

当我输入 1-1000 范围内的数字时，它工作正常。

当我输入一个 <1 或 >1000 的数字时，<div><p> 不会填充。

HTML:

<div class="preT" id="preT">
  <form>
    <label for="voipLines">VoIP Lines</label>
    <input type="number" id="voipLines" name="voipLines" requiered min="1" max="1000" value="1">
  </form>
  <div class="voipbutton" id="voipbutton">
    <button class="button" onclick="testfun()">Test Clicker</button>
  </div>
</div>
<div id="duringT">
  <p Id="clickerTest"></p>
  <div Id="prBar" data-label=""></div>
  <div id="canvascon"></div>
</div>

JS:

function testfun() { //used in HTML
  var voip = document.getElementById("voipLines").value;
  if (voip < 1) { //voiplines verification 
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else if (voip > 1000) {
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else {
    var voipGuide = document.getElementById("clickerTest").innerHTML = '<h2>Clicker Successful!!!</h2>\
    <p>Please click the link below to start <b>' + voip + ' test</b></p>\
    <p>To change the amount of tests to run <a href= "">Click Here</a></p>';
  document.getElementById('preT').style.display = 'none';
    document.getElementById("canvascon").innerHTML = '<div id="canvas-container"><canvas id="canvs3" style="background-color:#F0F0F0; ">Your browser does not support the HTML5 canvas tag.</canvas><br><br></div>';
    voipsims();
    bootfun();
  }
}

Answer 1

在 else 主体中，您使用 innerHTML，但在 if 和 else if 中，您使用 innerhtml。应该是 innerHTML

Answer 2

我不确定这个答案，但我认为 innerhtml 应该是 innerHTML 并且 'if'、'else if'、'else' 和“{”之间不应有空格“}”。所以应该是 “

如果（网络电话<1）{

...

}else if (voip>1000){

...

}其他{

...

} “

在请点击 link... 之后的段落结束后还有一个 \，我认为这是不正确的。

Answer 3

有一个错字：属性是 .innerHTML，而不是 .innerhtml。工作示例：

function testfun() { //used in HTML
  var voip = document.getElementById("voipLines").value,
      clickerTest = document.getElementById("clickerTest");
        
  if (voip < 1) //voiplines verification 
    return clickerTest.innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  
  else if (voip > 1000)
    return clickerTest.innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>"; 
  
  else {
    
    var voipGuide = clickerTest.innerHTML = '<h2>Clicker Successful!!!</h2>\
    <p>Please click the link below to start <b>' + voip + ' test</b></p>\
    <p>To change the amount of tests to run <a href= '
    '>Click Here</a></p>';
    document.getElementById('preT').style.display = 'none';
    document.getElementById("canvascon").innerHTML = '<div id="canvas-container"><canvas id="canvs3" style="background-color:#F0F0F0; ">Your browser does not support the HTML5 canvas tag.</canvas><br><br></div>';
    
  }
}

<div class="preT" id="preT">
  <form>
    <label for="voipLines">VoIP Lines</label>
    <input type="number" id="voipLines" name="voipLines" min="1" max="1000" value="1" required>
  </form>
  <div class="voipbutton" id="voipbutton">
    <button class="button" onclick="testfun()">Test Clicker</button>
  </div>
</div>
<div id="duringT">
  <p id="clickerTest"></p>
  <div id="prBar" data-label=""></div>
  <div id="canvascon"></div>
</div>

Answer 4

这是 Codepen 中的工作版本。 https://codepen.io/riza-khan/pen/YzwwRLQ?editors=1011

您的代码中存在一些不良做法。即，最好使用 eventListeners，然后通过 HTML 标签中的 onclick 调用函数。

其次，有一些拼写错误，已在codepen版本中更正。

通过更正，甚至不需要 IF/ELSEIF 块，但我还是把它留在那里了。

<div class="preT" id="preT">
    <form>
        <label for="voipLines">VoIP Lines</label>
        <input type="number" id="voipLines" name="voipLines" required min="1" max="1000" value="1">
    </form>
    <div class="voipbutton" id="voipbutton">
        <button class="button">Test Clicker</button>
    </div>
</div>
<div id="duringT">
    <p Id="clickerTest"></p>
</div>

document.querySelector(".button").addEventListener("click", () => {
    let voip = document.querySelector("#voipLines").value;
    if (voip < 1) {
        document.querySelector("#clickerTest").innerHTML =
            "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
    } else if (voip > 1000) {
        document.querySelector("#clickerTest").innerHTML =
            "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
    } else {
        var voipGuide = (document.getElementById("clickerTest").innerHTML =
            "<h2>Clicker Successful!!!</h2>\
    <p>Please click the link below to start <b>" +
            voip +
            ' test</b></p>\
    <p>To change the amount of tests to run <a href= "">Click Here</a></p>');
        document.getElementById("preT").style.display = "none";
        document.getElementById("canvascon").innerHTML =
            '<div id="canvas-container"><canvas id="canvs3" style="background-color:#F0F0F0; ">Your browser does not support the HTML5 canvas tag.</canvas><br><br></div>';
        voipsims();
        bootfun();
    }
});

JavaScript if 和 else if 语句无法正常工作

JavaScript if and else if statement not working properly

javascript

html

forms

if-statement

verification