javascript - 如何在 DIV 元素中显示此函数的结果？

Question

我不知道如何在元素中显示此函数的结果。我创建了一个 DIV 并对其进行了 id 标记。然后在 Javascript 中选择它，运行 innerHTML 并尝试使其等于函数中的总和。抛出错误。如果我在函数内使用 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>