Gia*_*anG 2 html javascript calculator
我正在学习编码，这只是一个练习。任何导致负数的操作都会显示错误，但console.logs会显示正确。\n这是为什么？
\n<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width">\n <title>replit</title>\n<style>\n\n#calculator{\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n max-width:400px;\n min-width: 300px;\n background-color: green;\n}\n\n#screen{\n width: 100%; \n aspect-ratio: 4/1.5;\n background-color: rgba(0, 0, 0, 0.8);\n}\n\n#input{\n width:90%;\n height:90%;\n background-color:rgba(0, 0, 0, 0); \n color:white;\n font-size: 15vw;\n direction: rtl;\n font-family: Helvetica, sans-serif;\n}\n\n#buttonsGrid{\n width: 100%;\n aspect-ratio: 4/5;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: repeat(5, 1fr);\n justify-content: center;\n font-size: 5vw;\n color:white;\n background-color: gray;\n font-family: Helvetica, sans-serif;\n}\n\n.singleButton{\n border: solid;\n border-color: black;\n border-width: 1px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n}\n\n[id="0Button"] {\n grid-column: span 2;\n}\n\n#equalButton, #plusButton, #minusButton, #xButton, #divisionButton{\n background-color: orange;\n} \n\n#cButton, #negativePositiveButton, #percentageButton {\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n</style>\n\n</head>\n\n<body>\n\n <h1>Simple calculator using JS</h1>\n\n <div id="calculator">\n <div id="screen">\n <input inputmode="numeric" id="input">\n </input>\n </div>\n\n <div id="buttonsGrid">\n <div id="cButton" class="singleButton">C\n </div>\n <div id="negativePositiveButton" class="singleButton">+/-\n </div>\n <div id="percentageButton" class="singleButton">%\n </div>\n <div id="divisionButton" class="singleButton">\xc3\xb7\n </div>\n\n <div id="7Button" class="singleButton numericButton">7</div>\n <div id="8Button" class="singleButton numericButton">8</div>\n <div id="9Button" class="singleButton numericButton">9</div>\n <div id="xButton" class="singleButton">x</div>\n\n <div id="4Button" class="singleButton numericButton">4</div>\n <div id="5Button" class="singleButton numericButton">5</div>\n <div id="6Button" class="singleButton numericButton">6</div>\n <div id="minusButton" class="singleButton">-</div>\n\n <div id="1Button" class="singleButton numericButton">1</div>\n <div id="2Button" class="singleButton numericButton">2</div>\n <div id="3Button" class="singleButton numericButton">3</div>\n <div id="plusButton" class="singleButton">+</div>\n\n <div id="0Button" class="singleButton numericButton">0</div>\n <div id="dotButton" class="singleButton numericButton">.</div>\n <div id="equalButton" class="singleButton">=</div>\n\n </div>\n </div>\n\n <script >\n\n \n const inputScreen = document.getElementById('input');\n \n const cButton = document.getElementById('cButton');\n const MoodButton = document.getElementById('negativePositiveButton');\n const percentageButton = document.getElementById('percentageButton');\n \n const divisionButton = document.getElementById('divisionButton');\n const xButton = document.getElementById('xButton');\n const minusButton = document.getElementById('minusButton');\n const plusButton = document.getElementById('plusButton');\n const equalButton = document.getElementById('equalButton');\n \n \n \n const numericButtonArr = [...document.getElementsByClassName('numericButton')];\n const operationButtonArr = [xButton, minusButton, plusButton];\n \n //button's events\n cButton.addEventListener('click', clearData);\n numericButtonArr.forEach(numericButton => {\n numericButton.addEventListener('click', displayNumbers);\n });\n operationButtonArr.forEach(operationButton => {\n operationButton.addEventListener('click', clearForSecondNumber);\n });\n divisionButton.addEventListener('click', handleDivision);\n MoodButton.addEventListener('click', changeMood);\n percentageButton.addEventListener('click', calculatePercentage);\n equalButton.addEventListener('click', performOperation);\n \n //variables\n let currentNumber = 0;\n let firstNumber = 0;\n let selectedOperation = '';\n let displayValue = '';\n \n let secondNumber = '';\n \n //Clear all data for C button press\n function clearData() {\n inputScreen.value = '';\n currentNumber = 0;\n displayValue = '';\n firstNumber = 0;\n selectedOperation = '';\n }\n \n //display numeric and dot buttons press on display\n function displayNumbers() {\n const value = this.textContent;\n \n if (value === '.') {\n // preventing dot duplication\n if (!displayValue.includes('.')) {\n displayValue += value;\n inputScreen.value = displayValue;\n }\n } else {\n displayValue += value;\n inputScreen.value = displayValue;\n }\n \n currentNumber = parseFloat(displayValue);\n }\n \n //convert - to + and + to-\n function changeMood(){\n currentNumber = currentNumber * (-1); \n displayValue = currentNumber;\n inputScreen.value = displayValue;\n }\n \n //Calculate %\n function calculatePercentage(){\n currentNumber = currentNumber / (100); \n displayValue = currentNumber;\n inputScreen.value = displayValue;\n }\n \n //for +,- and x. for division didnt work here :(\n function clearForSecondNumber() {\n selectedOperation = this.textContent;\n inputScreen.value = '';\n displayValue = '';\n firstNumber = currentNumber;\n }\n \n \n // Function to handle the division operation\n function handleDivision() {\n selectedOperation = '/';\n inputScreen.value = '';\n displayValue = '';\n firstNumber = currentNumber;\n }\n \n function performOperation() {\n secondNumber = currentNumber;\n let result;\n \n if (selectedOperation === 'x') {\n result = firstNumber * secondNumber;\n } else if (selectedOperation === '/') {\n result = firstNumber / secondNumber;\n } else if (selectedOperation === '-') {\n result = firstNumber - secondNumber;\n } else if (selectedOperation === '+') {\n result = firstNumber + secondNumber;\n }\n \n inputScreen.value = result;\n currentNumber = result;\n firstNumber = result;\n displayValue = '';\n }\n \n </script>\n\n</body>\n\n</html>\n因为您通过设置 来将书写方向设置为 RTL（从右到左）direction: rtl;。这对于阿拉伯语等语言来说是有意义的。
也许您只想简单地右对齐文本（而不反转其方向），在这种情况下您需要text-align: right;.
| 归档时间： |
|
| 查看次数： |
60 次 |
| 最近记录： |