如何在 JavaScript 的 if 语句中调用函数？

Question

我无法弄清楚函数 showInputE() 是如何不被预先拥有的。 我在函数中有一些 if 语句。 如果 if 语句为真，那么它们应该执行一个函数。 我希望函数隐藏或显示 easyAssignments div 中的输入，具体取决于用户在 numEAI 中输入的内容。 （例如：用户输入 3，只会显示 3 个输入框）但是，当我单击输入按钮时，似乎没有任何反应。

   <div id ="numEA">
  <p>How many easy assignments do you have to do today?</p>
  <input min="0" max="5" type="number" id="numEAI">
  <button class="w3-button w3-red" onclick="showInputE()">Enter</button>
</div>


<div id="easyAssignments">
    <p>What easy assignments do you have to do today?</p>
      <input type="text" id="easyA1">
      <input type="text" id="easyA2">
      <input type="text" id="easyA3">
      <input type="text" id="easyA4">
      <input type="text" id="easyA5">


</div>

<script>



  /* START of show input functions */

  function onlyShowInput1(){
      document.getElementById("easyA2").style.display = "none";
      document.getElementById("easyA3").style.display = "none";
      document.getElementById("easyA4").style.display = "none";
      document.getElementById("easyA5").style.display = "none";
      }
  function onlyShowInput2(){
      document.getElementById("easyA3").style.display = "none";
      document.getElementById("easyA4").style.display = "none";
      document.getElementById("easyA5").style.display = "none";
      }


  /* END of show input functions */

  function showInputE(){
  var numEAI = document.getElementById('numEAI');

    if (numEAI === 1){
        onlyShowInput1();
    } else if (numEAI === 2){
        onlyShowInput2();
      }

  }

</script>

Answer 1

将您的脚本更改为：

function showHide(n) {
  let inputs = document.getElementById("easyAssignments").querySelectorAll("input");
  let item = 0;
  inputs.forEach(function(i) {
    item++;
    if (item <= n) {
      i.style.display = "inline";
    } else {
      i.style.display = "none";
    }
  })
}
function showInputE(){
  var numEAI = document.getElementById('numEAI').value;
  showHide(numEAI);
}

由于所有输入项都以连续的 id 命名，您可以根据 id 是否匹配 "easyA" + numEAI 来切换显示样式。 没有必要为每个输入项设置一个函数。

Answer 2

您当前正在将 DOM 元素与if语句中的数字进行比较。

为了测试元素中包含的值，您可以使用numEAI.value检索它。 这将返回一个字符串，因此如果您要使用===测试值和类型的相等性，则需要将其与字符串进行比较if (numEAI.value === '1') ，否则仅测试相等性价值使用== 。

 /* START of show input functions */ function onlyShowInput1(){ document.getElementById("easyA2").style.display = "none"; document.getElementById("easyA3").style.display = "none"; document.getElementById("easyA4").style.display = "none"; document.getElementById("easyA5").style.display = "none"; } function onlyShowInput2(){ document.getElementById("easyA3").style.display = "none"; document.getElementById("easyA4").style.display = "none"; document.getElementById("easyA5").style.display = "none"; } /* END of show input functions */ function showInputE(){ var numEAI = document.getElementById('numEAI'); if (numEAI.value === '1'){ onlyShowInput1(); } else if (numEAI.value == 2){ onlyShowInput2(); } }

 <div id ="numEA"> <p>How many easy assignments do you have to do today?</p> <input min="0" max="5" type="number" id="numEAI"> <button class="w3-button w3-red" onclick="showInputE()">Enter</button> </div> <div id="easyAssignments"> <p>What easy assignments do you have to do today?</p> <input type="text" id="easyA1"> <input type="text" id="easyA2"> <input type="text" id="easyA3"> <input type="text" id="easyA4"> <input type="text" id="easyA5"> </div>