JavaScript中if语句调用函数方法及showInputE()函数故障排查

咱先直接点出你代码里的核心问题：你拿到的是输入框DOM元素本身，而不是用户输入的数值！这就导致你的条件判断永远不成立，自然不会执行后面的函数。

具体问题分析 #

看这段代码：

var numEAI = document.getElementById('numEAI');
if (numEAI === 1){
  onlyShowInput1();
}

document.getElementById('numEAI')返回的是<input>这个DOM对象，你拿一个对象和数字1做全等比较，结果肯定是false，所以if块里的代码根本不会跑。

修复步骤 #

1. 正确获取输入框的数值

要拿到用户输入的数字，得用输入框的.value属性，而且因为.value返回的是字符串，最好转成数字类型（用parseInt()或者Number()都可以）：

// 改成这样，获取输入值并转成整数
var numEAI = parseInt(document.getElementById('numEAI').value);

2. 覆盖更多边界情况

你现在的代码只处理了输入1和2的情况，但用户可能输入0、3-5，或者非数字内容，最好补充这些情况的处理：

function showInputE(){
  var numEAI = parseInt(document.getElementById('numEAI').value);
  
  // 处理非法输入：比如空值、非数字、超出0-5范围的情况
  if (isNaN(numEAI) || numEAI < 0 || numEAI > 5) {
    numEAI = 0; // 默认设为0，也可以加个提示告诉用户输入合法数字
  }

  // 根据数值调用对应逻辑
  if (numEAI === 1){
    onlyShowInput1();
  } else if (numEAI === 2){
    onlyShowInput2();
  } else if (numEAI === 3) {
    // 补充显示前3个的逻辑
    document.getElementById("easyA4").style.display = "none";
    document.getElementById("easyA5").style.display = "none";
  } else if (numEAI === 4) {
    document.getElementById("easyA5").style.display = "none";
  } else if (numEAI === 5) {
    // 显示所有输入框
    document.querySelectorAll('#easyAssignments input').forEach(input => {
      input.style.display = "block";
    });
  } else { // numEAI为0的情况
    document.querySelectorAll('#easyAssignments input').forEach(input => {
      input.style.display = "none";
    });
  }
}

3. 优化重复代码（可选但推荐）

你现在的onlyShowInput1、onlyShowInput2这类函数重复代码太多，可以写成一个通用函数，根据传入的数字来控制显示/隐藏，代码更简洁：

// 通用函数：根据count值显示对应数量的输入框
function setEasyAssignmentsCount(count) {
  const inputs = document.querySelectorAll('#easyAssignments input');
  inputs.forEach((input, index) => {
    // 索引从0开始，所以index+1 <= count时显示，否则隐藏
    input.style.display = (index + 1 <= count) ? 'block' : 'none';
  });
}

// 简化后的showInputE
function showInputE(){
  var numEAI = parseInt(document.getElementById('numEAI').value);
  
  if (isNaN(numEAI) || numEAI < 0 || numEAI > 5) {
    numEAI = 0;
  }

  setEasyAssignmentsCount(numEAI);
}

额外检查点 #

如果修复后还是没反应，打开浏览器的开发者工具（F12）看Console面板有没有报错：

• 有没有拼写错误？比如元素ID、函数名写错
• 脚本是否在DOM加载完成后执行？（不过你的代码是内联脚本，放在HTML后面，应该没问题）

内容的提问来源于stack exchange，提问作者user14056428