'Backspace'和'Clear'函数在JavaScript计算器中不起作用
[英]'Backspace' and 'Clear' functions not working in JavaScript calculator
问题描述
So the title tells most of the story. 
因此标题说明了大部分故事。 I am making a pure HTML/CSS/JS calculator and the HTML/CSS went well but I can't seem to get the first couple functions to work. 我正在制作一个纯HTML / CSS / JS计算器，并且HTML / CSS运行良好，但似乎无法使第一个函数起作用。 I've already done googling but just comparing code, my code looks like it should work, so I'm stumped. 我已经完成了谷歌搜索，但是只是比较代码，我的代码看起来应该可以工作，所以我很困惑。 Anyway, here's any potentially relevant code. 无论如何，这是任何潜在的相关代码。
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
Using on c lick instead of on C lick. 在c lick上使用而不是在C lick上使用。 ie lowercase c in onclick will fix your problem. 即onclick中的小写字母c将解决您的问题。
解决方案2
0 2019-06-28 05:57:58
At first while using ES6, you should add "Use Strict" at the beginning of your script. 首先，在使用ES6时，应在脚本开头添加“ Use Strict”。
Second ensure the script is run, when the DOM is ready, otherwise getElementById will be undefined, because the element is not rendered yet. 第二，确保在DOM准备就绪时运行脚本，否则getElementById将是未定义的，因为尚未呈现该元素。
Third you have a typo: try btnBackspace.onclick, which worked on my test. 第三，您有一个错字：尝试在我的测试中工作的btnBackspace.onclick。 (Using Firefox) （使用Firefox）
Fourth, might be just here but you forgot the HTML-Tags. 第四，可能就在这里，但是您忘记了HTML标签。
解决方案3
0 已采纳 2019-06-28 06:00:47
将backspaceBtn.onClick更改为backspaceBtn.addEventListener("click", function () {应该可以解决问题。我在这里为您准备了一个小提琴。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.