why does `innerText` property does not work?

Question

Why does var a = e.target.innerText does not work but if I set var a = e.target and then do if(a.innerText == "") it works. Here is a JS Fiddle of my code and a snippet bellow:

let boxes = document.querySelectorAll(".boxes");
const turn = "X";

boxes.forEach((e) => {
  e.addEventListener("click", (e) => {
    var a = e.target.innerText;

    if (a == "") {
      a = turn;
    }
  });
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.main-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 4px;
  font-size: 3em;
  vertical-align: bottom;
}

<div class="main-container">
        <div class="container">
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div><br>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div><br>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
        </div>
    </div>

score 2 · Accepted Answer · answered May 29 '22 at 07:41

The question asks:

Why does var a = e.target.innerText does not work but if I set var a = e.target and then do if(a.innerText == "") [it does]

e.target gives you an element.

e.target.innerText gives you the inner text of the element e.target. It is text, it is not itself a reference to that text.

So when you set the JS variable a = e.target.innerText and then set a = 'X', it is the JS variable that is set to that text, not the innerText of the element.

It may help (or may add confusion, I'm not sure) to read up about call by reference versus value etc e.g. at Is JavaScript a pass-by-reference or pass-by-value language?

score 1 · Answer 2 · answered May 29 '22 at 07:22

1

Instead of

if (a == "") {
  a = turn;
}

you should do

if (a == "") {
  e.target.innerText = turn;
}

answered May 29 '22 at 07:22

equt

192
1
8

I am asking why does this happen. – Karan Rajput May 29 '22 at 07:26
What you're doing is first assigning `e.target.innerText` to the variable `a`, and then changing the variable `a`. You're not changing what you want. You may think that you've somehow linked them together, but no, string is a primitive in JavaScript, and primitives are copied rather than shared by references, and they cannot be mutated either. – equt May 29 '22 at 07:34

score 1 · Answer 3 · answered May 29 '22 at 07:47

It's because var a = e.target.innerText; gets only the string inside the element <div class="boxes"></div> and assigns to the variable 'a', then you are just changing the variable 'a' instead of changing the div's innerText.

So var a = e.target works because it gets the element instead of just only the string. Then you can change the div's innerText with,

if (a.innerText == "") {
    a.innerText = turn;
}

why does `innerText` property does not work?

3 Answers3