如何通過他們按下的數字按鈕捕獲用戶輸入？

Question

我正在構建一個計算器應用程序，就像標題所述，我想找到一種方法，可以將我的“顯示值”存儲在一個變量中，以便在數學函數 (+ - * /) 中使用。 按鈕確實按預期顯示，但下一個用例是捕獲該值並將其放入變量中。

 let numKeys = document.querySelectorAll('.num'); let onScreen = document.getElementById('display-screen'); let addNum = document.getElementById('add'); let subtractNum = document.getElementById('subtract'); let multiplyNum = document.getElementById('multiply'); let divideNum = document.getElementById('divide'); let decimal = document.getElementById('.'); let clearScreen = document.getElementById('clear'); let backSpace = document.getElementById('back-space'); let oneNum = document.getElementById('1'); let twoNum = document.getElementById('2'); let threeNum = document.getElementById('3'); let fourNum = document.getElementById('4'); let fiveNum = document.getElementById('5'); let sixNum = document.getElementById('6'); let sevenNum = document.getElementById('7'); let eightNum = document.getElementById('8'); let nineNum = document.getElementById('9'); oneNum.addEventListener('click', () => { document.getElementById('display-screen').textContent += '1'; }); twoNum.addEventListener('click', () => { //document.getElementById('display-screen').id; console.log(twoNum.value); }); threeNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '3'; }); fourNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '4'; }); fiveNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '5'; }); sixNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '6'; }); sevenNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '7'; }); eightNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '8'; }); nineNum.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '9'; }); decimal.addEventListener('click', () => { document.getElementById('display-screen').innerHTML += '.'; }); clearScreen.addEventListener('click', () => { document.getElementById('display-screen').textContent = ''; })

 <div class="calc-keys"> <div id="row-one"> <button type="button" class="num" id="7">7</button> <button type="button" class="num" id="8">8</button> <button type="button" class="num" id="9">9</button> <button type="button" id="add">+</button> </div> <div id="row-two"> <button type="button" class="num" id="4">4</button> <button type="button" class="num" id="5">5</button> <button type="button" class="num" id="6">6</button> <button type="button" id="subtract">-</button> </div> <div id="row-three"> <button type="button" class="num" id="1" value="1">1</button> <button type="button" class="num" id="2" value="2">2</button> <button type="button" class="num" id="3">3</button> <button type="button" id="multply">x</button> </div> <div id="row-four"> <button type="button" id=".">.</button> <button type="button" class="num" id="0">0</button> <button type="button" id="equals">=</button> <button type="button" id="division">/</button> </div> </div>

如果您需要我提供更多詳細信息、您可以提供的任何提示以及在哪里尋找答案，請告訴我。 謝謝。

Answer 1

您已經完成了捕獲按鍵所需的工作。 您可以只創建一個全局變量並在每個click偵聽器中更新該變量。

let value = 0;
twoNum.addEventListener('click', () => {
    value = (value * 10) + 2
    document.getElementById('display-screen').textContent = value; // The number will automatically be converted to a string here
});

或者，如果您想將您的號碼存儲為字符串：

let value = "";
twoNum.addEventListener('click', () => {
    value += "2";
    console.log("value as a number is:", parseInt(value);
    document.getElementById('display-screen').textContent = value;
});

---

額外提示：您可以通過使用for循環在此處節省大量重復：

for (let i = 0; i < 10; i++) {
    let button = document.getElementById(i);
    button.addEventListener('click', () => {
        console.log("Button pressed:", i);
    });
}