無法在計算器中添加兩位數。 只能加個位數
[英]Unable to add double digits in a calculator. Can only add single digit numbers
問題描述
正如標題所說。 當我輸入個位數時，效果很好，但是當我嘗試輸入更大的數字（如兩位數）時，它不起作用，我不知道為什么。 似乎它只讀取第二個數字的第二個數字，例如：50 + 55（它讀作 5）所以結果是 55。與 3 位數字相同，它只讀取第二個數字中的第三個數字。
const calcDisplay = document.querySelector('.output'); calcDisplay.textContent = '0' let num2 = '' const add = (a, b) => a + b; const subtract = (a, b) => a - b; const multiply = (a, b) => a * b; const divide = (a, b) => a / b; //assigning calculator functions to operators' buttons // const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(operator => { operator.addEventListener('click', () => { operator.classList.add('isDepressed') switch(operator) { case(operator.dataset.action === 'add'): return add(a, b) case(operator.dataset.action === 'substract'): return subtract(a, b) case(operator.dataset.action === 'multiply'): return multiply(a, b) case(operator.dataset.action === 'divide'): return divide(a, b) } num2 = calcDisplay.textContent }) }); //an event that make digits appear on the display // const buttons = document.querySelectorAll('.keyButton').forEach(button => { button.addEventListener('click', () => { removeClass(); num1 = button.textContent; displayedNum = calcDisplay.textContent; if (displayedNum === '0') { calcDisplay.textContent = num1; } else if (displayedNum === num2) { calcDisplay.textContent = num1 } else { calcDisplay.textContent = displayedNum + num1 } }); }); const buttonEquals = document.querySelector('.keyButtonEquals'); buttonEquals.addEventListener('click', () => { document.querySelectorAll('.keyButtonOperation').forEach(operator => { if(operator.dataset.action === 'add') { calcDisplay.textContent = parseInt(num1) + parseInt(num2) } }); }); // Clears the whole display with one click // const buttonClear = document.querySelector('.keyButtonClear'); buttonClear.addEventListener('click', () => { calcDisplay.textContent = '0' // I will fill up the rest of the code here when I get done with the rest // }); // Deletes a single number when you click a button // function deleteInput() { const deleteButton = document.querySelector('.keyButtonDelete') deleteButton.addEventListener('click', () => { calcDisplay.textContent = calcDisplay.textContent.slice(0, -1); }); } deleteInput() //removes a selection of a operator after a second number is clicked // function removeClass () { buttonRemove = document.querySelectorAll('.keyButtonOperation').forEach(button => { button.classList.remove('isDepressed') }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculator</title> <link rel="stylesheet" href="./styles/style.css"> <body> <div class="calcContainer"> <div class="buttons"> <div class="output"> </div> <button class="keyButton">7</button> <button class="keyButton">8</button> <button class="keyButton">9</button> <button class="keyButtonOperation" data-action = "SignChange" >+/-</button> <button class="keyButtonDelete">DEL</button> <button class="keyButton">4</button> <button class="keyButton">5</button> <button class="keyButton">6</button> <button class="keyButtonOperation" data-action="multiply">X</button> <button class="keyButtonOperation" data-action="divide">%</button> <button class="keyButton">1</button> <button class="keyButton">2</button> <button class="keyButton">3</button> <button class="keyButtonOperation" data-action = "substract">-</button> <button class="keyButtonEquals">=</button> <button class="keyButtonClear">C</button> <button class="keyButton">0</button> <button class="keyButton">.</button> <button class="keyButtonOperation" data-action = "add">+</button> </div> </div> <script src="./scripts/script.js"></script> </body> </head> </html>
2 個解決方案
解決方案1
1 已采納 2022-06-27 09:46:18
我認為以下內容可以解決您的問題：
//...
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
// ADD THIS:
num1 = calcDisplay.textContent;
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
if(operator.dataset.action === 'add') {
calcDisplay.textContent = parseInt(num1) + parseInt(num2)
}
});
});
//...
您必須將num1設置為顯示中的值。 否則，它使用最后輸入的數字。
解決方案2
0 2022-06-27 11:34:17
Beni Trainor的答案就是您正在尋找的答案。 但是，我根據您的計算器編寫的以下計算器可能對您有用。 它允許一次使用多個數字進行更復雜的操作。 這可能對您有用，但我很高興Beni Trainor 的回答足以滿足您的需求！
// These are the characters which are allowed in the display. var allowed = /[0-9()*/+\-.]/g; // This evaluates a string as an equation according to the allowed characters above. function solve(equation) { try { if(equation == '') { return ''; } return Function('return Number('+equation.match(allowed).join('')+');')(); } catch { return 'Error'; } } document.addEventListener("DOMContentLoaded", () => { // Create a variable containing the display element for ease of reference. var display = document.querySelector('.calculator .display'); // Add scrolling to the display with a smooth scroll behavior. display.addEventListener('wheel', function(event) { event.preventDefault(); var i = 0; var interval = setInterval(() => { this.scrollBy((event.deltaY/Math.abs(event.deltaY))*2, 0); i+= 2; if(i >= Math.abs(event.deltaY)) { clearInterval(interval); } }, 1); }); // Allow character buttons to input their character to the display. document.querySelectorAll('.calculator .character').forEach(element => { element.addEventListener('click', function() { display.value+= this.innerText; // This ensures that the display only contains allowed characters. display.value = display.value.match(allowed).join(''); display.scrollTo(display.scrollWidth, 0); }); }); // Allow the delete action key to delete characters from the display. document.querySelector('.calculator .delete').addEventListener('click', function() { // This ensures that the display only contains allowed characters. try { display.value = display.value.slice(0, -1).match(allowed).join(''); } catch { display.value = ''; } display.scrollTo(display.scrollWidth, 0); }); // Allow the submit action key to calculate the user's equation. document.querySelector('.calculator .submit').addEventListener('click', function() { var solution = solve(display.value); // YOUR CODE GOES HERE TO STORE OR OTHERWISE PROCESS THE SOLUTION display.value = solution; }); // Allow the clear action key to clear the display. document.querySelector('.calculator .clear').addEventListener('click', function() { display.value = ''; }); });
body, body :not(head) { box-sizing: border-box; font-size: inherit; } .calculator { display: flex; flex-wrap: wrap; width: 300px; height: 400px; border: 1px solid black; font-size: 30px; } .display { width: 100%; height: 20%; padding: 1ch; background-color: white; border: 1px solid black; text-align: right; } button { width: 20%; height: 20%; background-color: white; } button:hover:not(:active) { background-color: #FAFAFA; } button.number { border: 1px dotted lightgray; } button.operator { border: 1px dashed black; } button.action { border: 1px solid black; }
<!DOCTYPE html> <html> <head> </head> <body> <div class='calculator'> <input class='display' disabled /> <button class='character number'>7</button> <button class='character number'>8</button> <button class='character number'>9</button> <button class='character operator'>(</button> <button class='character operator'>)</button> <button class='character number'>4</button> <button class='character number'>5</button> <button class='character number'>6</button> <button class='character operator'>*</button> <button class='character operator'>/</button> <button class='character number'>1</button> <button class='character number'>2</button> <button class='character number'>3</button> <button class='character operator'>+</button> <button class='character operator'>-</button> <button class='action delete'>␡</button> <button class='character number'>0</button> <button class='character operator'>.</button> <button class='action submit'>=</button> <button class='action clear'>C</button> </div> </body> </html>
是否可以在不先將其轉換為字符串的情況下將兩位數字一起添加？
[英]Can you Add The Digits in a Two Digit Number Together Without First Converting it to a String?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.