Javscript -DOM-калькулятор отображает цифры на экране - PullRequest
Новая
       0

Javscript -DOM-калькулятор отображает цифры на экране

0 голосов
/ 31 октября 2018

Я внедряю калькулятор, и я застреваю, пытаясь отобразить цифру на экране. Я перебираю всю свою цифру, чтобы получить их, но когда я пытаюсь заменить их, чтобы отобразить их в моем 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 ]

0 голосов
/ 31 октября 2018

Это должна быть кнопка, а не кнопки:)

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

0 голосов
/ 31 октября 2018

document.querySelector ('# nums'). TextContent + = button.innerHTML;

0 голосов
/ 31 октября 2018

использовать 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;
 })
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...