JavaScript计算无结果返回求助：表格结果列无输出

我帮你排查了代码里的几个关键问题，正是这些问题导致结果列没有反应，下面逐一拆解并给出修复方案：

1. 函数定义方式错误 #

你把calculaResultado写成了立即执行函数表达式(IIFE)，这种写法会让函数在页面加载时只执行一次，而且外部（比如HTML的onchange事件）根本调用不到这个函数。正确的做法是声明一个普通函数，让输入框的事件能正常触发它。

2. return语句提前终止了函数执行 #

你的代码里在条件判断后直接return，导致后面给结果输入框赋值的代码永远不会运行。比如当b === c时，函数直接返回1，根本走不到给resultado1赋值的步骤。

3. 未将输入值转为数值类型 #

输入框的value属性返回的是字符串，直接进行数学计算或大小比较会出错（比如字符串"5"和"10"比较会得到"5" > "10" = true，这显然不符合我们的预期）。

修复后的完整代码 #

HTML部分（无需修改，保持原样即可） #

<tr> 
  <th>Objetivo 1</th> 
  <th> 
    <div class="input-field col s12"> 
      <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" /> 
      <label for="datainicio"></label> 
    </div> 
  </th> 
  <th> 
    <div class="input-field col s12"> 
      <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" /> 
      <label for="datafim"></label> 
    </div> 
  </th> 
  <th> 
    <div class="input-field col s12"> 
      <input id="avInicial1" type="text" class="validate" autocomplete="off" name="AvInicial" onchange="calculaResultado(1)"> 
      <label for="avinicial"></label> 
    </div> 
  </th> 
  <th> 
    <div class="input-field col s12"> 
      <input id="meta1" type="text" class="validate" autocomplete="off" name="Meta" onchange="calculaResultado(1)"> 
      <label for="meta"></label> 
    </div> 
  </th> 
  <th> 
    <div class="input-field col s12"> 
      <input id="AvIntercalar" type="text" class="validate" autocomplete="off" name="AvIntercalar"> 
      <label for="avintercalar"></label> 
    </div> 
  </th> 
  <th> 
    <div class="input-field col s12"> 
      <input id="avFinal1" type="text" class="validate" autocomplete="off" name="Avfinal" onchange="calculaResultado(1)"> 
      <label for="avfinal"></label> 
    </div> 
  </th> 
  <th> 
    <div class="input-field col s12"> 
      <input disabled id="resultado1"/> 
    </div> 
  </th> 
</tr>

JavaScript部分（修复后的版本） #

<script>
function calculaResultado(x) {
  console.log(x);
  // 将输入值转为数值类型，空值默认设为0避免计算报错
  const a = parseFloat(document.getElementById('avInicial' + x).value) || 0;
  const b = parseFloat(document.getElementById('meta' + x).value) || 0;
  const c = parseFloat(document.getElementById('avFinal' + x).value) || 0;
  
  let resultado;
  // 先处理除数为0的情况，防止出现NaN
  if (b === 0) {
    resultado = 0;
  } else if (b === c) {
    resultado = 100; // 直接返回100%对应的数值
  } else if (a > c) {
    resultado = 0;
  } else {
    resultado = ((c * 100) / b);
  }
  
  // 将计算结果赋值给结果输入框，转为整数显示
  document.getElementById('resultado' + x).value = parseInt(resultado);
}
</script>

额外优化小建议 #

• 可以给输入框加上数字输入限制（比如设置type="number"），避免用户输入非数值内容导致计算异常。
• 把onchange换成oninput事件，这样用户输入过程中就能实时更新结果，体验会更好。

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