Javascript-DOM计算器在屏幕上显示数字

我正在实现一个计算器，但我一直在尝试在屏幕上显示数字。我遍历所有数字以获得它们，但当我试图替换它们以便在我的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>

希望有人能帮助

使用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
})
})

EDIT:事实上，由于您只想在HTML中使用文本节点，因此简单地使用button.textContent或@Barmar指出的this.textContent(this也引用button(会更好地提高性能

textContent更快，因为当您使用innerHTML时，浏览器引擎在复制所有内容时必须重新处理和解析所有内容。CCD_ 16具体只处理一个文本节点及其内容。

buttons.forEach(button => {
button.addEventListener('click', function(){
document.querySelector('#nums').textContent = button.textContent;
})
})

应该是按钮而不是按钮：(

document.querySelector('#nums').textContent = button.innerHTML

document.querySelector('#nums'(.textContent+=button.innerHTML；

相关内容

最新更新

热门标签：