Question

我正在实现一个计算器，但我一直试图在屏幕上显示数字。我遍历所有数字以获取它们，但是当我尝试替换它们以便在ID为#nums的div中显示它们时，它将不起作用。这就是我所坚持的功能

   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>

希望有人可以提供帮助

Answer 1

使用button.innerHTML而不是buttons.innerHTML

该数组称为buttons-您要取出的每个项目都被初始化为button。您想要将div设置为等于该 item的 innerHTML，而不是设置为数组buttons的数组，而数组innerHTML并不具有+=属性。此外，您的问题尚不清楚，但是如果您想继续向计算器框中添加数字，请确保使用=运算符而不是document.querySelector('#nums').textContent += button.innerHTML，就像{{1 }}这样，它将在按钮按下时不断添加到每个框中。

如果您希望按钮仅替换计算器窗口中的上一项，则将起作用：

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;
 })
})

Answer 2

应该是按钮，而不是按钮：）

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

Answer 3

document.querySelector（'＃nums'）。textContent + = button.innerHTML;

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

3 个答案: