Difference between inserting a DOM element into a variable and using it's properties, and doing the same without a variable

Question

I'm trying to create a JS calculator.

<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>

I just began to write code that will display the numbers that were clicked and was wondering why this code works:

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

While this code doesn't:

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

Aren't they the same? The only difference is that in the second example a variable holds the querySelector and the textContent property.

Adding a sample of the HTML would improve the quality of the question. — RamblinRose, Jan 16 '20 at 19:57

score 2 · Answer 1 · answered Jan 16 '20 at 20:02

Strings are primitive data types and so when you do this:

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

value is just what was the textContent, it doesn't contain the reference to it. If you want to do something like this you would probably structure it like so:

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

score 2 · Accepted Answer · answered Jan 16 '20 at 20:05

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

That line does not do what you think it does. It does not store a reference to the element's text content in the variable value; instead, it stores the value. It's a string. In JavaScript, strings are immutable, meaning you can't change them once they're created. When you do something like value += 'hello' you're actually creating a new string with the appended characters, while the original remains unchanged.

What you want to be doing instead is storing a reference to the DOM element itself so you can assign new values to its textContent in the loop:

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

score 0 · Answer 3 · answered Jan 16 '20 at 20:02

value is not a reference; updating it won't update the textContent property of your element. You could do something like:

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

For more information, see:

Difference between inserting a DOM element into a variable and using it's properties, and doing the same without a variable

3 Answers3