'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.