为什么我无法在文档上设置innerHTML

Question

我正在尝试创建一个你点击的按钮，它将计算用户的年龄，我的JavaScript代码将使用innerHTML将用户的年龄写在文档本身上。我不明白为什么它不起作用。我没有得到任何回应，甚至没有一个错误。

这是我的JavaScript:

let btn = document.getElementById("btn");
btn.addEventListener('click',howOldAreYou)
function howOldAreYou(){
let age= document.getElementById("year").value
let currentYear = 2021

let howOld= currentYear - age;
document.innerHTML= howOld;
}

Answer 1

您正在查找document.body.innerHTML或document.documentElement.innerHTML。

document不是元素，因此不具有innerHTML属性。

Answer 2

我认为问题是您没有正确使用innerHTML元素属性，它应该是yourElementId.innerHTML而不是document.innerHTML

试试这个：

btn.addEventListener('click',function(){
let age = document.getElementById("year").value;
let currentYear = 2021;
let howOld = currentYear - age;
result.innerHTML = howOld;
});

<button id="btn">Calculate</button>
<input id="year"/>
<div id="result"></div>