我正在创建一个 HTML/JS 计算器，我的主要结果在 div 中，但我无法使用 eventListeners 更改它。我尝试获取结果的 innerHTML 和 innerText 。并尝试通过多种方式更改它，但不幸的是，它并没有改变结果内容。
这是我尝试过的:
HTML:
<body>
<div id="calculator">
<div id="result">0</div>
<div class="buttons" id="clearOne">C</div>
<div class="buttons" id="clearAll">←</div>
<div class="buttons" id="random">RAND</div>
<div class="buttons" id="equal">=</div>
<div class="buttons" id="one">1</div>
<div class="buttons" id="two">2</div>
<div class="buttons" id="three">3</div>
<div class="buttons" id="multiply">X</div>
<div class="buttons" id="four">4</div>
<div class="buttons" id="five">5</div>
<div class="buttons" id="six">6</div>
<div class="buttons" id="division">/</div>
<div class="buttons" id="seven">7</div>
<div class="buttons" id="eight">8</div>
<div class="buttons" id="nine">9</div>
<div class="buttons" id="minus">-</div>
<div class="buttons" id="doubleZero">00</div>
<div class="buttons" id="zero">0</div>
<div class="buttons" id="dot">.</div>
<div class="buttons" id="plus">+</div>
</div>
<script src="./calculator.js"></script>
</body>
JS:
let result = document.getElementById('result').innerHTML;
let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let zero = document.getElementById('zero');
let doubleZero = document.getElementById('doubleZero');
let dot = document.getElementById('dot');
let clearOne = document.getElementById('clearOne');
let clearAll = document.getElementById('clearAll');
let random_btn = document.getElementById('random');
let equal = document.getElementById('equal');
let multiply = document.getElementById('multiply');
let divison = document.getElementById('division');
let minus = document.getElementById('minus');
let plus = document.getElementById('plus');
const numberEvents = (btn, value) => {
return btn.addEventListener(
"click",
() => {
if (result === '0'){
result = "";
console.log('test');
result + `${value}`;
} else {
console.log('test1');
result + `${value}`;
}
}
)
}
numberEvents(one, '1');
numberEvents(two, '2');
numberEvents(three, '3');
numberEvents(four, '4');
numberEvents(five, '5');
numberEvents(six, '6');
numberEvents(seven, '7');
numberEvents(eight, '8');
numberEvents(nine, '9');
问题不在于 numberEvents 函数。我也尝试单独编写addEventListener。
这是codesandbox中的完整程序:https://codesandbox.io/s/html-css-wxmh8?fontsize=14&hidenavigation=1&theme=dark
最佳答案
因为 document.getElementById('result').innerHTML — 只是一个字符串。当您稍后编写结果+值时——它只是一个操作，没有任何赋值。 result = result + value 也不会改变任何东西 - 它会改变保存的字符串，但不会改变实际的“innerHTML”。
您必须将 HTML 对象保存到变量中，并每次检查其更新的 textContent:
let result = document.getElementById('result');
let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let zero = document.getElementById('zero');
let doubleZero = document.getElementById('doubleZero');
let dot = document.getElementById('dot');
let clearOne = document.getElementById('clearOne');
let clearAll = document.getElementById('clearAll');
let random_btn = document.getElementById('random');
let equal = document.getElementById('equal');
let multiply = document.getElementById('multiply');
let divison = document.getElementById('division');
let minus = document.getElementById('minus');
let plus = document.getElementById('plus');
const numberEvents = (btn, value) => {
btn.addEventListener("click", function() {
if (result.textContent === '0') {
result.textContent = "";
console.log('test');
result.textContent += value;
// The same as result.textContent = result.textContent + value
} else {
console.log('test1');
result.textContent += value;
}
});
}
numberEvents(one, '1');
numberEvents(two, '2');
numberEvents(three, '3');
numberEvents(four, '4');
numberEvents(five, '5');
numberEvents(six, '6');
numberEvents(seven, '7');
numberEvents(eight, '8');
numberEvents(nine, '9');.buttons {
display: inline-block;
width: 50px;
border: 1px solid orange;
margin: 5px;
padding: 5px;
cursor: pointer;
}<div id="calculator">
<div id="result">0</div>
<div class="buttons" id="clearOne">C</div>
<div class="buttons" id="clearAll">←</div>
<div class="buttons" id="random">RAND</div>
<div class="buttons" id="equal">=</div><br>
<div class="buttons" id="one">1</div>
<div class="buttons" id="two">2</div>
<div class="buttons" id="three">3</div>
<div class="buttons" id="multiply">X</div><br>
<div class="buttons" id="four">4</div>
<div class="buttons" id="five">5</div>
<div class="buttons" id="six">6</div>
<div class="buttons" id="division">/</div><br>
<div class="buttons" id="seven">7</div>
<div class="buttons" id="eight">8</div>
<div class="buttons" id="nine">9</div>
<div class="buttons" id="minus">-</div><br>
<div class="buttons" id="doubleZero">00</div>
<div class="buttons" id="zero">0</div>
<div class="buttons" id="dot">.</div>
<div class="buttons" id="plus">+</div>
</div>但是，如果您有多个具有相同功能的按钮，那么使用 ids 是不好的做法。替代解决方案的一个小演示:
let res = document.getElementById('result');
let num = document.querySelectorAll('.type-number');
for( let i = 0; i < num.length; i++ ){
num[i].addEventListener('click', function(){
if( res.textContent == 0 ) {
res.textContent = this.textContent;
} else {
res.textContent += this.textContent;
}
});
}.type-number {
margin: 5px;
font-size: 25px;
}<p id="result">0</p>
<button class="type-number">1</button>
<button class="type-number">2</button>
<button class="type-number">3</button><br>
<button class="type-number">4</button>
<button class="type-number">5</button>
<button class="type-number">6</button><br>
<button class="type-number">7</button>
<button class="type-number">8</button>
<button class="type-number">9</button><br>
<button class="type-number">0</button>关于javascript - 无法使用innerHTML和innerText更改标签内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59022291/