Разница между вставкой элемента DOM в переменную и использованием его свойств, и тем же без переменной - PullRequest
Новая
       4

Разница между вставкой элемента DOM в переменную и использованием его свойств, и тем же без переменной

0 голосов
/ 16 января 2020

Я пытаюсь создать калькулятор JS. 

<div class="container">
    <div class="input"></div>
    <button class="num" id="num1">1</button>
    <button class="num" id="num2">2</button>
    <button class="num" id="num3">3</button>
    <button class="num" id="num4">4</button>
    <button class="num" id="num5">5</button>
    <button class="num" id="num6">6</button>
    <button class="num" id="num7">7</button>
    <button class="num" id="num8">8</button>
    <button class="num" id="num9">9</button>
    <button class="num" id="num0">0</button>
    <button class="equal">=</button>
    <button class="plus">+</button>
    <button class="minus">-</button>
  </div>

Я только начал писать код, который будет отображать числа, которые были нажаты, и мне было интересно, почему этот код работает: 

    document.querySelectorAll('.num').forEach(el => {
      el.addEventListener('click', () => {
        document.querySelector('.input').textContent += el.textContent;
      })
    })

Пока этот код не работает: 

var value = document.querySelector('.input').textContent;
    document.querySelectorAll('.num').forEach(el => {
      el.addEventListener('click', () => {
        value += el.textContent;
      })
    })

Разве они не одинаковы? Единственное отличие состоит в том, что во втором примере переменная содержит querySelector и свойство textContent.

Ответы [ 3 ]

2 голосов
/ 16 января 2020

Строки являются примитивными типами данных, и поэтому, когда вы делаете это: 

var value = document.querySelector('.input').textContent;

значение - это то, что было textContent, оно не содержит ссылки на него. Если вы хотите сделать что-то подобное, вы, вероятно, структурируете это так: 

var input = document.querySelector('.input');
document.querySelectorAll('.num').forEach(el => {
    el.addEventListener('click', () => {
        input.textContent += el.textContent;
    })
})
2 голосов
/ 16 января 2020 
var value = document.querySelector('.input').textContent;

Эта строка не делает то, что вы думаете, что она делает. Он не хранит ссылку на текстовое содержимое элемента в переменной value; вместо этого он хранит значение . Это строка В JavaScript строки являются неизменяемыми, что означает, что вы не можете изменить их, как только они будут созданы. Когда вы делаете что-то вроде value += 'hello', вы фактически создаете новую строку с добавленными символами, а оригинал остается неизменным.

Вместо этого вы хотите сохранить ссылку на сам элемент DOM, так Вы можете назначить новые значения для его textContent в l oop: 

var element = document.querySelector('.input');
document.querySelectorAll('.num').forEach(el => {
  el.addEventListener('click', () => {
    element.textContent += el.textContent;
  })
})
0 голосов
/ 16 января 2020

value не является ссылкой; обновление не приведет к обновлению свойства textContent вашего элемента. Вы могли бы сделать что-то вроде: 

var inputElement = document.querySelector('.input');
document.querySelectorAll('.num').forEach(el => {
  el.addEventListener('click', () => {
    inputElement.textContent += el.textContent;
  })
})

Для получения дополнительной информации см .:

...