Javascript -DOM-calculator 在屏幕上顯示數字
[英]Javascript -DOM-calculator display digits on a screen
問題描述
我正在實現一個計算器，但我一直試圖在屏幕上顯示數字。 我遍歷所有數字以獲取它們，但是當我嘗試替換它們以將它們顯示在我的 div 中時，id #nums 將不起作用。 這是我堅持使用的功能
buttons.forEach(button => {
button.addEventListener('click', function(){
console.log('it work')
document.querySelector('#nums').textContent = buttons.innerHTML
})
})
這是一個可以看到更多的小提琴
function add(a, b) { return a + b } function substract(a, b) { return a - b } function sum(arr) { result = 0; for (var i = 0; i < arr.length; i++) { result += arr[i] } return result } /* function multiply_range(arr){ result = 1; for(var i = 0; i < arr.length; i++){ result *= arr[i] } return result } */ function multiply(a, b) { return a * b } function divide(a, b) { return a / b } var sum = document.getElementById('sum'); var substract = document.getElementById('minus') var multiply = document.getElementById('multiply') var divide = document.getElementById('divide') function operate(operator, a, b) { if (operator === sum) { return add(a, b); } else if (operator === substract) { return substract(a, b); } else if (operator === multiply) { return multiply(a, b); } else if (operator === divide) { return divide(a, b); } } operate(sum, 1, 1); var display_value = document.querySelector('#nums'); const buttons = document.querySelectorAll('.number-btn') // loop through all the buttons // Object.keys(buttons) transform my object in a array /* Object.keys(buttons).forEach(button => { button.addEventListener('click', function(){ console.log('it work') }) }) */ buttons.forEach(button => { button.addEventListener('click', function() { console.log('it work') document.querySelector('#nums').textContent = buttons.innerHTML }) }) /* var btn_1 = document.querySelector('#btn-1') btn_1.addEventListener('click', function(){ console.log('it work') document.querySelector('#nums').textContent = btn_1.textContent }) */ /* document.querySelector('#nums').textContent = 0; */ /* document.getElementsByClassName('number-btn').addEventListener('click', function(){ display_value == document.queryselector('nums'); }) */
body { background-color: black; } .container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; padding: 10px; width: 85%; height: 300px; margin: 0 auto; background-color: #cc1515; } #btn-equals { grid-row-start: 2; grid-column-start: 4; grid-row-end: 6; grid-column-end: 4; } .number-btn { border: 0.5px solid black; background-color: white; font-size: 30px; } .operator-btn { border: 0.5px solid black; background-color: black; color: white; font-size: 30px; } .results { margin: 0 auto; width: 90%; height: 50px; background-color: white; } .contour { background-color: lightblue; position: absolute; top: 30%; left: 35%; width: 400px; margin: auto; vertical-align: middle; } #nums { font-size: 40px; text-align: right; } #operator { font-size: 30px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="contour"> <p>The calculator</p> <div id="results" class="results"> <div id="nums">55</div> </div> <div class="container"> <button id="sum" class="operator-btn">+</button> <button id="minus" class="operator-btn">-</button> <button id="multiply" class="operator-btn">x</button> <button id="divide" class="operator-btn">/</button> <button id="btn-7" class="number-btn">7</button> <button id="btn-8" class="number-btn">8</button> <button id="btn-9" class="number-btn">9</button> <button id="btn-4" class="number-btn">4</button> <button id="btn-5" class="number-btn">5</button> <button id="btn-6" class="number-btn">6</button> <button id="btn-1" class="number-btn">1</button> <button id="btn-2" class="number-btn">2</button> <button id="btn-3" class="number-btn">3</button> <button id="btn-period" class="number-btn">.</button> <button id="btn-O" class="number-btn">0</button> <button id="btn-clear" class="number-btn">AC</button> <button id="btn-equals" class="operator-btn">=</button> </div> </div> <script type="text/javascript" src="app.js"></script> </body> </html>
希望有人能幫忙
3 個解決方案
解決方案1
1 已采納 2018-10-31 17:55:25
使用button.innerHTML不buttons.innerHTML
該數組稱為buttons - 您拉出的每個項目都被初始化為button 。 您希望將 div 設置為等於該項目的innerHTML，而不是數組buttons ——因為它是一個數組，沒有innerHTML屬性。 此外，您的問題並不清楚，但如果您想繼續向計算器框中添加數字，請務必使用+=運算符而不是= ，就像document.querySelector('#nums').textContent += button.innerHTML這樣它會在按鈕按下時不斷添加到每個框。
如果您希望按鈕僅替換計算器窗口中的前一項，這將起作用：
buttons.forEach(button => {
button.addEventListener('click', function(){
document.querySelector('#nums').textContent = button.innerHTML
})
})
編輯：作為事實上，因為你只是想你的HTML中的文本節點，這將是更好的性能，以簡單地使用button.textContent或@Barmar指出， this.textContent （ this也引用button ）
textContent更快，因為當您使用innerHTML ，瀏覽器引擎必須在復制時重新處理和解析所有內容。 textContent具體只處理一個文本節點和其中的內容。
buttons.forEach(button => {
button.addEventListener('click', function(){
document.querySelector('#nums').textContent = button.textContent;
})
})
解決方案2
0 2018-10-31 17:57:48
它應該是按鈕而不是按鈕:)
document.querySelector('#nums').textContent = button.innerHTML
解決方案3
0 2018-10-31 17:58:27
document.querySelector('#nums').textContent += button.innerHTML;
如何在 JavaScript 計算器顯示屏上添加適當的括號“'(' or ')'”
[英]How do I add the appropriate parentheses " '(' or ')' " to the JavaScript calculator display screen
如何在javascript計算器中檢測和存儲操作符之前和之后的數字？
[英]how to detect and store the digits before and after of hitting an operator in a javascript calculator?
使用 Javascript 創建一個計算器 - 不知道為什么顯示沒有更新
[英]Create a calculator with Javascript - Not sure why the display is not updating
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.