Question

我无法弄清楚如何在一个元素中显示此函数的结果。我创建了一个DIV并对其进行了ID标记。然后在Javascript中将其选中，然后运行innerHTML并尝试使该函数等于sum。引发错误。如果我在函数中使用console.log sum，它返回的值就很好。我可以对如何在HTML元素中显示此数字提出一些建议吗？这是我的代码：

document.getElementById("#result").innerHTML = sum;


function getSum() {
const input = document.getElementById('dateInput').value;
var sum = 0;
for (var i = 0; i < input.length; i++) {
    const num = parseInt(input.charAt(i));
    if (!isNaN(num)) {
        sum += num;
    }
}

}

    <div id="result"></div>
    <input type="date" name="" value="" id="dateInput">
    <button onclick="getSum()">Calculate</button>

Answer 1

将用于设置.innerHTML的行放在计算sum的函数的底部，并在使用#时删除.getElementById()。实际上，如果您使用的值不包含任何HTML，则不要使用.innerHTML，因为它会影响性能和安全性。请改用.textContent。

function getSum() {
  const input = document.getElementById('dateInput').value;
  var sum = 0;
  for (var i = 0; i < input.length; i++) {
    const num = parseInt(input.charAt(i));
    if (!isNaN(num)) {
        sum += num;
    }
  }
  document.getElementById("result").textContent= sum;
}

    <div id="result"></div>
    <input type="date" id="dateInput">
    <button onclick="getSum()">Calculate</button>

Answer 2

这是一个小提琴（代码的编辑版本）-https://jsfiddle.net/6g93khy1/

请注意，按id获取元素应该是这样的：

document.getElementById("result").innerHTML = sum;

Answer 3

我认为您需要在函数末尾设置该值，因为在您的情况下该值不会刷新。

只需添加第一行：

document.getElementById("result").innerHTML = sum;

在函数末尾：）

如何在DIV元素中显示此功能的结果？

3 个答案: