Question

我有一个代码，试图根据用户选择的输入值计算总值。看起来很简单，但我无法反映总数。请有人能告诉我问题在哪里吗？

function calculate() {
  var panel = parseInt(document.getElementsById("panel").value);
  panelv = 65;
  panelt = panel * panelv;
  derating_value = 2;
  total_hours_standby = panelt * derating_value;
}

document.getElementsById("total_hours").innerHTML = total_hours_standby;

<input type="number" id="panel" placeholder="panel quantity"></input><br>
<button type="button" onclick="calculate">Result</button>

<p id="total_hours">result displays here</p>

Answer 1

您需要

用于onclick="calculate()"进行函数调用，而不仅仅是函数，
使用getElementById，拼写问题
声明所有变量，
最后将输出移到函数内部

function calculate() {
    var panel = parseInt(document.getElementById("panel").value),
        panelv = 65,
        panelt = panel * panelv,
        derating_value = 2,
        total_hours_standby = panelt * derating_value;

    document.getElementById("total_hours").innerHTML = total_hours_standby;
}

<input type="number" id="panel" placeholder="panel quantity"></input><br>
<button type="button" onclick="calculate()">Result</button>

<p id="total_hours">result displays here</p>

Answer 2

getElementById是单数
声明您的变量
使用方括号调用calculate（）
在函数内分配值
不需要</input>

这里是带有eventListeners的版本，因为其他答案已经向您展示了如何修复您的版本

function calculate() {
  var panel = +document.getElementById("panel").value;
  if (panel === "" || isNaN(panel)) panel = 0;
  let panelv = 65;
  let panelt = panel * panelv;
  let derating_value = 2;
  document.getElementById("total_hours").textContent = (panelt * derating_value);
}
window.addEventListener("load", function() {
  document.getElementById("calc").addEventListener("click", calculate)
  calculate(); // run at load
})

<input type="number" id="panel" placeholder="panel quantity"><br>
<button type="button" id="calc">Result</button> result displays here: <span id="total_hours"></span>

Answer 3

这里有几个问题：

如果您查看了控制台日志，则大多数可以找到。
对于初学者，该函数称为getElementById而不是getElementsById，因为应该只有一个具有唯一ID的元素，因此此处的复数意义不大。

另一个是逻辑错误：单击按钮后，即执行calculate时不更新内容。

还有另一个语法错误，那就是应如何将函数传递给HTML元素的属性。它必须是functionName()而不是functionName

这是简单修复此代码的样子：

var total_hours_standby = 0;
 function calculate() {
 var panel = parseInt(document.getElementById("panel").value);
 panelv = 65;
 panelt = panel * panelv;
 derating_value = 2;
 total_hours_standby = panelt * derating_value;
 document.getElementById("total_hours").innerHTML = total_hours_standby;
  }

 document.getElementById("total_hours").innerHTML = total_hours_standby;

 <input type="number" id="panel" placeholder="panel quantity"></input><br>
 <button type="button" onclick="calculate()">Result</button>

 <p id="total_hours">result displays here</p>

在这里，我为您提供一些改进建议。

由于您使用了全局变量total_hours_standby，封装它的想法。所谓的模块模式应该可以完成这项工作。
total_hours_standby的新值似乎不取决于旧值一个，所以我想你的意思是在其他地方使用它-为了做到这一点因此，您需要使用“公共” getter公开它。
如果以上情况并非如此，则您不需要total_hours_standby 变量，您可以直接将其返回或显示而不将该值存储在变量中。
我将用于呈现的代码放在单独的函数中-这是因为规则功能的经验是它们应该具有单个责任。一个函数用于计算，另一个函数用于渲染然后是一个用于处理用户输入和点击事件的函数，使用前两个。这样，例如，如果您只想计算没有渲染结果的东西，那么您就可以：）
我还将DOM节点存储在变量中，而不是调用 getElementById，这不是由于性能，通常是由于假设，我这样做只是为了提高可读性。
常量而不是硬编码的值。

var Calculator = (function() {
  const panelInput = document.getElementById("panel");
  const output =  document.getElementById("total_hours");

  const PANEL_V = 65;
  const DERATING_VALUE = 2;
  
  const render = value => output.innerHTML = value;
  const calculate = value => value * PANEL_V * DERATING_VALUE;
  
  let total_hours_standby = 0;
  return {
    handleInput: function() {
      total_hours_standby = calculate(panelInput.value);
      render(total_hours_standby);
    },
    getTotalHoursStandby: () => total_hours_standby
  };
})();

<input type="number" id="panel" placeholder="Panel quantity" />
 <button type="button" onclick="Calculator.handleInput()">Calculate</button>

 <p id="total_hours">Result displays here</p>

Answer 4

首先，您应该调用方法calculate。

<button type="button" onclick="calculate()">Result</button>

然后，在计算函数中添加此行document.getElementsById("total_hours").innerHTML = total_hours_standby;。

Alos，拼写错误：document.getElementById代替document.getElementsById

Answer 5

是错字

document.getElement s ById

应该是

document.getElementById

JS根据用户输入执行计算

5 个答案: