如何使我的计算器在单击显示器时显示每个按钮的值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="calculator.css">
<title>
Calculator
</title>
</head>
<body>
<div id="calculator">
<button class="num">0</button>
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="op">+</button>
<button class="op">-</button>
<button class="op">*</button>
<button class="op">/</button>
<button class="op">=</button>
<div id="display">0</div>
</div>
<script src="calculator.js"></script>
</body>
</html>

我正试图从该项目中构建一个计算器：odin项目中的计算器。我有所有这些按钮和一个显示器，它会在显示器上显示按钮的值。我该怎么做？我试过做以下事情，但没有成功：

let listOf = document.querySelectorAll('num');
listOf.ForEach((num), () => {
num.addEventListener('click', () => {
res.textContent = num.nodeValue; // above,let res = document.getElementbyId('display');) 
})
})

获取类num的所有按钮的查询不正确。要按类选择所有元素，请使用点.。您可以在此处看到更多选择器
使用innerHTML设置/获取它们的"innerHTML"值(不过我不建议使用这种方法(
您可以对类op的元素使用相同的解决方案

let buttons = document.querySelectorAll('.num');
for (let i=0; i< buttons.length; i++){
let button = buttons[i];
button.addEventListener('click' , () => {
document.getElementById("display").innerHTML += button.innerHTML
})
}

<div id="calculator">
<button class="num">0</button>
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="op">+</button>
<button class="op">-</button>
<button class="op">*</button>
<button class="op">/</button>
<button class="op">=</button>
<div id="display">0</div>
</div>

相关内容

最新更新

热门标签：