为什么 `innerText` 属性不起作用？

Question

为什么 var a = e.target.innerText 不起作用，但如果我设置 var a = e.target 然后再设置 if(a.innerText == "") 就可以了。这是我的代码 JS Fiddle 和下面的片段：

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>

Answer 1

而不是

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

你应该做的

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

Answer 2

问题是：

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给你一个元素。

e.target.innerText 为您提供元素 e.target 的内部文本。它是文本，它本身不是对该文本的引用。

所以当你设置JS变量a = e.target.innerText然后设置a = 'X'时，设置的是那个文本的JS变量，而不是元素的innerText .

阅读有关按引用调用与按值调用等的内容可能会有所帮助（或者可能会增加混乱，我不确定），例如在 Is JavaScript a pass-by-reference or pass-by-value language?

Answer 3

是因为var a = e.target.innerText;只获取了元素<div class="boxes"></div>里面的字符串赋值给了变量'a'，那么你只是在改变变量'a'而不是改变div 的 innerText。

所以 var a = e.target 有效，因为它获取元素而不仅仅是字符串。然后你可以用

改变div的innerText

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

为什么 `innerText` 属性不起作用？

why does `innerText` property does not work?

html

javascript

css

innertext

为什么 `innerText` 属性 不起作用？

why does `innerText` property does not work?

html

javascript

css

innertext

为什么 `innerText` 属性不起作用？