Question

文本未使用 DOM 进行更改。错误消息显示“无法将属性‘innerHTML’设置为 null”

2018-10-30

64

javascript html css

我知道这是一个非常简单的问题，而且可能已经有人回答了，但没有任何答案。

因此，当我单击“七”按钮时，它应该将标题更改为 7。我的程序尚未完成，因此其他按钮均不起作用。它在 chrome 控制台上返回错误消息：Uncaught TypeError：无法将属性“innerHTML”设置为 null。提前致谢！这是我的代码：

var num2;
var answer;
var num1;
function whenNumPressed(inumber){
document.getElementById(output).innerHTML = inumber;

}

#center{
 text-align: center;
 font-family: Comic Sans MS;
 font-size: 50px;
 color:black;
}
#outputButton{
  width: 500px;
  height: 150px;
  font-size:50px;
  text-size:100;
}
*{
  text-align:center;
  color:red;
  font-family: Comic Sans MS;
}
#input{
  width:167px;
  font-size:30px;
  height:100px;
}
#output{
  border-style: solid;
  margin-left: 20px;
  margin-right:20px;
  border-color:blue;
  font-size:60px;
}
#calc{
  border-style:solid;
  margin-left: 300px;
  margin-right:300px;
  border-width:10px;
  border-radius:50px;
  border-color:green;
}
#specialinput{
  width:334px;
  font-size:30px;
  height:100px;
  margin-left: 0px;
}

<div id="calc">
<h1 id="center">Calculator</h1>
<h1 id="output">Answer</h1>
<br>
<button id="input" onclick="whenNumPressed('7')">7</button>
<button id="input">8</button>
<button id="input">9</button>
<button id="input">+</button>

<br>
<button id="input">4</button>
<button id="input">5</button>
<button id="input">6</button>
<button id="input">-</button>
<br>
<button id="input">1</button>
<button id="input">2</button>
<button id="input">3</button>
<button id="input">X</button>
<br>
<button id="input">AC</button>
<button id="input">0</button>
<button id="input">=</button>
<button id="input">÷</button>
</div>

Answer 1

每当您提到任何字符串时，都必须将其放在引号中，否则它会将其作为变量名。

因此，请在您的代码中做这个微小的更改并检查。

document.getElementById("output").innerHTML = inumber;

Answer 2

您忘记了引号：

document.getElementById(output) 应为 document.getElementById('output')

var num2;
var answer;
var num1;
function whenNumPressed(inumber){
document.getElementById('output').innerHTML = inumber;

}

#center{
 text-align: center;
 font-family: Comic Sans MS;
 font-size: 50px;
 color:black;
}
#outputButton{
  width: 500px;
  height: 150px;
  font-size:50px;
  text-size:100;
}
*{
  text-align:center;
  color:red;
  font-family: Comic Sans MS;
}
#input{
  width:167px;
  font-size:30px;
  height:100px;
}
#output{
  border-style: solid;
  margin-left: 20px;
  margin-right:20px;
  border-color:blue;
  font-size:60px;
}
#calc{
  border-style:solid;
  margin-left: 300px;
  margin-right:300px;
  border-width:10px;
  border-radius:50px;
  border-color:green;
}
#specialinput{
  width:334px;
  font-size:30px;
  height:100px;
  margin-left: 0px;
}

<div id="calc">
<h1 id="center">Calculator</h1>
<h1 id="output">Answer</h1>
<br>
<button id="input" onclick="whenNumPressed('7')">7</button>
<button id="input">8</button>
<button id="input">9</button>
<button id="input">+</button>

<br>
<button id="input">4</button>
<button id="input">5</button>
<button id="input">6</button>
<button id="input">-</button>
<br>
<button id="input">1</button>
<button id="input">2</button>
<button id="input">3</button>
<button id="input">X</button>
<br>
<button id="input">AC</button>
<button id="input">0</button>
<button id="input">=</button>
<button id="input">÷</button>
</div>