'Backspace'和'Clear'函数在JavaScript计算器中不起作用
[英]'Backspace' and 'Clear' functions not working in JavaScript calculator
问题描述
因此标题说明了大部分故事。 我正在制作一个纯HTML / CSS / JS计算器，并且HTML / CSS运行良好，但似乎无法使第一个函数起作用。 我已经完成了谷歌搜索，但是只是比较代码，我的代码看起来应该可以工作，所以我很困惑。 无论如何，这是任何潜在的相关代码。
var oneBtn = document.getElementById('calc-one'); var twoBtn = document.getElementById('calc-two'); var threeBtn = document.getElementById('calc-three'); var fourBtn = document.getElementById('calc-four'); var fiveBtn = document.getElementById('calc-five'); var sixBtn = document.getElementById('calc-six'); var sevenBtn = document.getElementById('calc-seven'); var eightBtn = document.getElementById('calc-eight'); var nineBtn = document.getElementById('calc-nine'); var zeroBtn = document.getElementById('calc-zero'); var decimalBtn = document.getElementById('calc-decimal'); var clearBtn = document.getElementById('calc-clear'); var backspaceBtn = document.getElementById('calc-backspace'); var displayValElement = document.getElementById('calc-display-val'); var displayVal = '0'; var pendingVal; var evalStringArray = []; var calcNumBtns = document.getElementsByClassName('calc-btn-num'); var calcOperatorBtns = document.getElementsByClassName('calc-btn-operator'); var updateDisplayVal = (clickObj) => { var btnText = clickObj.target.innerText; if (displayVal === '0') displayVal = ''; displayVal += btnText; displayValElement.innerText = displayVal; } for (let i = 0; i < calcNumBtns.length; i++) { calcNumBtns[i].addEventListener('click', updateDisplayVal, false); } //for (let i = 0; i < calcOperatorBtns.length; i++) { // calcOperatorBtns[i].addEventListener('click', performOperation, false) //} clearBtn.onClick = () => { displayVal = '0'; pendingVal = undefined; evalStringArray = []; displayValElement.innerHTML = displayVal; } backspaceBtn.onClick = () => { let lengthOfDisplayVal = displayVal.length; displayVal = displayVal.slice(0, lengthOfDisplayVal - 1); if (displayVal === '') displayVal = '0'; displayValElement.innerText = displayVal; }
@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap'); body { font-family: 'Roboto', sans-serif; } .calc-btn { background-color: silver; color: black; width: 25px; height: 45px; border: 1px solid gray; text-align: center; cursor: pointer; font-size: 32px; font-weight: 100; padding-top: 3px; } .calc-btn:hover { background-color: orange; } .row { display: table; table-layout: fixed; width: 200px; } .column { display: table-cell; } #calc-zero { width: 52.66666667px; border-radius: 0 0 0 7px; } #calc-clear { width: 52.66666667px; } #calc-display-val { height: 80x; color: white; text-align: right; border-left: 1px solid gray; border-right: 1px solid gray; border-top: 1px solid gray; font-size: 48px; background-color: #383838; overflow: hidden; white-space: nowrap; padding: 12px; border-radius: 7px 7px 0 0; } .calc-btn-operator { background-color: orange; color: white; } h1 { text-align: center; margin-top: 50px; } #calc-equals { border-radius: 0 0 7px 0; } #calc-parent { margin-left: calc(50% - 100px); }
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Pure HTML/CSS/JS Calculator</h1> <div id="calc-parent"> <div class="row"> <div class="column" id="calc-display-val">0</div> </div> <div class="row"> <div class="calc-btn column" id="calc-clear">AC</div> <div class="calc-btn column" id="calc-backspace">⇤</div> <div class="calc-btn calc-btn-operator column" id="calc-divide">÷</div> </div> <div class="row"> <div class="calc-btn calc-btn-num column" id="calc-seven">7</div> <div class="calc-btn calc-btn-num column" id="calc-eight">8</div> <div class="calc-btn calc-btn-num column" id="calc-nine">9</div> <div class="calc-btn calc-btn-operator column" id="calc-multiply">x</div> </div> <div class="row"> <div class="calc-btn calc-btn-num column" id="calc-four">4</div> <div class="calc-btn calc-btn-num column" id="calc-five">5</div> <div class="calc-btn calc-btn-num column" id="calc-six">6</div> <div class="calc-btn calc-btn-operator column" id="calc-minus">-</div> </div> <div class="row"> <div class="calc-btn calc-btn-num column" id="calc-one">1</div> <div class="calc-btn calc-btn-num column" id="calc-two">2</div> <div class="calc-btn calc-btn-num column" id="calc-three">3</div> <div class="calc-btn calc-btn-operator column" id="calc-plus">+</div> </div> <div class="row"> <div class="calc-btn calc-btn-num column" id="calc-zero">0</div> <div class="calc-btn column" id="calc-decimal">.</div> <div class="calc-btn calc-btn-operator column" id="calc-equals">=</div> </div> </div> </body>
3 个解决方案
解决方案1
1 2019-06-28 07:27:45
在c lick上使用而不是在C lick上使用。 即onclick中的小写字母c将解决您的问题。
解决方案2
0 2019-06-28 05:57:58
首先，在使用ES6时，应在脚本开头添加“ Use Strict”。
第二，确保在DOM准备就绪时运行脚本，否则getElementById将是未定义的，因为尚未呈现该元素。
第三，您有一个错字：尝试在我的测试中工作的btnBackspace.onclick。 （使用Firefox）
第四，可能就在这里，但是您忘记了HTML标签。
解决方案3
0 已采纳 2019-06-28 06:00:47
将backspaceBtn.onClick更改为backspaceBtn.addEventListener("click", function () {应该可以解决问题。我在这里为您准备了一个小提琴。
我需要使用javascript为计算器创建退格功能
[英]I need to create a backspace function for my calculator with javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.