【发布时间】:2021-09-08 00:44:34
【问题描述】:
当用户单击操作标志时,我试图在“prev”div 中复制用户输入的数量。知道如何改进我的代码吗?当我点击一个操作按钮时,我的文字消失了,我在同一个地方得到了错误。
function calculate(button) {
let number = (button.innerHTML)
let current = document.getElementById("current")
let currentTotal = (current.innerHTML)
let newTotal = currentTotal + number
current.innerHTML = newTotal
}
function operation(){
let current = document.getElementById("current")
let prev = document.getElementById("prev")
current.innerHTML = prev
}
<div class="calc-grid">
<div id="result">
<div id="prev"></div>
<div id="current"></div>
</div>
<button class='span' onclick="AC()">AC</button>
<button>DEL</button>
<button onClick="operation()">÷</button>
<button onClick="calculate(this)">1</button>
<button onClick="calculate(this)">2</button>
<button onClick="calculate(this)">3</button>
<button onClick="operation()">*</button>
<button onClick="calculate(this)">4</button>
<button onClick="calculate(this)">5</button>
<button onClick="calculate(this)">6</button>
<button onClick="operation()">+</button>
<button onClick="calculate(this)">7</button>
<button onClick="calculate(this)">8</button>
<button onClick="calculate(this)">9</button>
<button onClick="operation()">-</button>
<button onClick="calculate(this)">.</button>
<button onClick="calculate(this)">0</button>
<button class='span'>=</button>
</div>
【问题讨论】:
-
您遇到了哪个错误?您正在设置
current.innerHTML = prev。innerHTML需要一个字符串,而不是一个元素。 -
像
onclick这样的内联事件处理程序是not recommended。它们是注册事件的obsolete, hard-to-maintain and unintuitive 方式。总是useaddEventListener。 -
使用event delegation而不是分配多个事件监听器 — 它更易于维护,并且适用于动态添加的元素。例如,使用event argument 的
target。见the tag info 和What is DOM Event delegation?。
标签: javascript html calculator