你好，我写了一个简单的html/javascript计算器。
每当我进行计算时，它都会被添加到html上显示的列表中。
我需要什么：单击列表项时，我需要该计算的字符串，这样我就可以将值重新加载回操作数1和操作数2 中
<html>
<head>
</head>
<body>
<h1>Calculator With Buttons And History</h1>
<table>
<tbody>
<tr>
<td><label>Operand 1:</label></td>
<td><input id="o1" type="text" /></td>
</tr>
<tr>
<td><label>Operand 2:</label></td>
<td><input id="o2" type="text" /></td>
</tr>
</tbody>
</table>
<p><button onclick="add()"> + </button> <button onclick="sub()"> - </button> <button onclick="mul()"> x </button> <button onclick="div()"> / </button></p>
<p>Result:<input id="result" name="result" readonly="readonly" type="text" value="" /></p>
<ul id="result_list" class="list-group" onclick="getCalc(this)">
<li class="list-group-item">1+1=2</li>
<li class="list-group-item">1-1=0</li>
<li class="list-group-item">2*2=4</li>
<li class="list-group-item">3/3=1</li>
</ul>
<script src="filter.js"> </script>
<script src="calc.js"> </script>
</body>
</html>
在没有看到代码或除了获取innerHTML之外还想做什么的情况下，这里有几个选项：
一种方法是从<ul>标签中删除onClick事件，并将其移动到每个<li>项目
<ul id="result_list" class="list-group">
<li class="list-group-item" onclick="getCalc(this)">1+1=2</li>
<li class="list-group-item" onclick="getCalc(this)">1-1=0</li>
<li class="list-group-item" onclick="getCalc(this)">2*2=4</li>
<li class="list-group-item" onclick="getCalc(this)">3/3=1</li>
</ul>
然后在您的javascript 中
function getCalc(item) {
console.log(item.innerHTML)
}
另一种方法是为<ul id="result_list" class="list-group">添加一个eventListener
<ul id="result_list" class="list-group">
<li class="list-group-item">1+1=2</li>
<li class="list-group-item">1-1=0</li>
<li class="list-group-item">2*2=4</li>
<li class="list-group-item">3/3=1</li>
</ul>
在您的Javascript 中
const resultList = document.getElementById('result_list');
resultList.addEventListener('click', item => {
console.log(item.target.innerHTML);
});
要在纯旧JS中实现这一点，您需要编辑add和sub函数，以便它们将事件侦听器连接到它们创建的li：
<html>
<head>
</head>
<body>
<h1>Calculator With Buttons And History</h1>
<table>
<tbody>
<tr>
<td><label>Operand 1:</label></td>
<td><input id="o1" type="text" /></td>
</tr>
<tr>
<td><label>Operand 2:</label></td>
<td><input id="o2" type="text" /></td>
</tr>
</tbody>
</table>
<p><button onclick="add()"> + </button> <button onclick="sub()"> - </button> <button onclick="mul()"> x </button> <button onclick="div()"> / </button></p>
<p>Result:<input id="result" name="result" readonly="readonly" type="text" value="" /></p>
<ul id="result_list" class="list-group">
</ul>
</body>
<script>
const o1 = document.querySelector("#o1");
const o2 = document.querySelector("#o2");
const resetOperators = (e) => {
const re = /+|-/;
const [v1, v2] = e.target.innerText.split(re);
o1.value = v1;
o2.value = v2
}
const add = () => {
const val = parseFloat(o1.value, 10) + parseFloat(o2.value, 10);
const li = document.createElement("li");
li.innerHTML=`${o1.value}+${o2.value}`;
li.addEventListener("click", resetOperators);
document.querySelector("#result_list").appendChild(li);
document.querySelector("#result").value = val;
}
</script>
</html>