无法使用 innerHTML 和 innerText 更改标签内容答案

【问题标题】：Can't change tag content with innerHTML and innerText无法使用 innerHTML 和 innerText 更改标签内容
【发布时间】：2020-03-20 04:21:32
【问题描述】：

我正在创建一个 HTML/JS 计算器，我的主要结果在 div 中，但我无法使用 eventListeners 更改它。我试图得到innerHTML 和innerText 的结果。并尝试通过多种方式更改它，但不幸的是，它并没有改变结果内容。

这是我尝试过的：

HTML：

<body>
    <div id="calculator">
        <div id="result">0</div>

        <div class="buttons" id="clearOne">C</div>
        <div class="buttons" id="clearAll">&#8592;</div>
        <div class="buttons" id="random">RAND</div>
        <div class="buttons" id="equal">=</div>

        <div class="buttons" id="one">1</div>
        <div class="buttons" id="two">2</div>
        <div class="buttons" id="three">3</div>
        <div class="buttons" id="multiply">X</div>

        <div class="buttons" id="four">4</div>
        <div class="buttons" id="five">5</div>
        <div class="buttons" id="six">6</div>
        <div class="buttons" id="division">/</div>

        <div class="buttons" id="seven">7</div>
        <div class="buttons" id="eight">8</div>
        <div class="buttons" id="nine">9</div>
        <div class="buttons" id="minus">-</div>

        <div class="buttons" id="doubleZero">00</div>
        <div class="buttons" id="zero">0</div>
        <div class="buttons" id="dot">.</div>
        <div class="buttons" id="plus">+</div>
    </div>

    <script src="./calculator.js"></script>
</body>

JS：

let result = document.getElementById('result').innerHTML;

let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let zero = document.getElementById('zero');
let doubleZero = document.getElementById('doubleZero');
let dot = document.getElementById('dot');

let clearOne = document.getElementById('clearOne');
let clearAll = document.getElementById('clearAll');
let random_btn = document.getElementById('random');
let equal = document.getElementById('equal');
let multiply = document.getElementById('multiply');
let divison = document.getElementById('division');
let minus = document.getElementById('minus');
let plus = document.getElementById('plus');

const numberEvents = (btn, value) => {
    return btn.addEventListener(
        "click",
        () => {
            if (result === '0'){
                result = "";
                console.log('test');
                result + `${value}`;
            } else {
                console.log('test1');
                result + `${value}`;
            }
        }
    )
}

numberEvents(one, '1');
numberEvents(two, '2');
numberEvents(three, '3');
numberEvents(four, '4');
numberEvents(five, '5');
numberEvents(six, '6');
numberEvents(seven, '7');
numberEvents(eight, '8');
numberEvents(nine, '9');

问题不在于numberEvents 函数。我也试过单独写addEventListener。

这里是codesandbox中的完整程序：https://codesandbox.io/s/html-css-wxmh8?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

当您想要更改它或获取当前值时，您需要明确设置/获取innerHTML。 variable = ...innerHTML 只是将 variable 设置为当前值。 variable 和 innerHTML 之间没有绑定，改变一个不会改变另一个。您也不要将result + `${value}`; 保存到任何东西
@PatrickEvans 抱歉，您可以在我在最新编辑中提到的代码框中显示它吗？我不明白我做错了什么：/
@PatrickEvans 哦，我明白了，非常感谢您的解释！

标签： javascript html dom events

【解决方案1】：

因为document.getElementById('result').innerHTML — 只是一个字符串。当你稍后写result + value时——这只是一个操作，没有任何赋值。 result = result + value 也不会改变任何东西——它会改变保存的字符串，但不会改变实际的“innerHTML”。

您必须将 HTML 对象保存到变量中，并检查它是否每次都更新了 textContent：

let result = document.getElementById('result');

let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let zero = document.getElementById('zero');
let doubleZero = document.getElementById('doubleZero');
let dot = document.getElementById('dot');

let clearOne = document.getElementById('clearOne');
let clearAll = document.getElementById('clearAll');
let random_btn = document.getElementById('random');
let equal = document.getElementById('equal');
let multiply = document.getElementById('multiply');
let divison = document.getElementById('division');
let minus = document.getElementById('minus');
let plus = document.getElementById('plus');

const numberEvents = (btn, value) => {
  btn.addEventListener("click", function() {
    if (result.textContent === '0') {
      result.textContent = "";
      console.log('test');
      result.textContent += value; 
      // The same as    result.textContent = result.textContent + value
    } else {
      console.log('test1');
      result.textContent += value;
    }
  });
}

numberEvents(one, '1');
numberEvents(two, '2');
numberEvents(three, '3');
numberEvents(four, '4');
numberEvents(five, '5');
numberEvents(six, '6');
numberEvents(seven, '7');
numberEvents(eight, '8');
numberEvents(nine, '9');

.buttons {
  display: inline-block;
  width: 50px;
  border: 1px solid orange;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}

<div id="calculator">
  <div id="result">0</div>

  <div class="buttons" id="clearOne">C</div>
  <div class="buttons" id="clearAll">&#8592;</div>
  <div class="buttons" id="random">RAND</div>
  <div class="buttons" id="equal">=</div><br>

  <div class="buttons" id="one">1</div>
  <div class="buttons" id="two">2</div>
  <div class="buttons" id="three">3</div>
  <div class="buttons" id="multiply">X</div><br>

  <div class="buttons" id="four">4</div>
  <div class="buttons" id="five">5</div>
  <div class="buttons" id="six">6</div>
  <div class="buttons" id="division">/</div><br>

  <div class="buttons" id="seven">7</div>
  <div class="buttons" id="eight">8</div>
  <div class="buttons" id="nine">9</div>
  <div class="buttons" id="minus">-</div><br>

  <div class="buttons" id="doubleZero">00</div>
  <div class="buttons" id="zero">0</div>
  <div class="buttons" id="dot">.</div>
  <div class="buttons" id="plus">+</div>
</div>

但是，如果您有多个具有相同功能的按钮，则使用 id 是一种不好的做法。替代解决方案的小演示：

let res = document.getElementById('result');
let num = document.querySelectorAll('.type-number');

for( let i = 0; i < num.length; i++ ){
  num[i].addEventListener('click', function(){
    if( res.textContent == 0 ) {
      res.textContent = this.textContent;
    } else {
      res.textContent += this.textContent;
    }
  });
}

.type-number {
  margin: 5px;
  font-size: 25px;
}

<p id="result">0</p>

<button class="type-number">1</button>
<button class="type-number">2</button>
<button class="type-number">3</button><br>
<button class="type-number">4</button>
<button class="type-number">5</button>
<button class="type-number">6</button><br>
<button class="type-number">7</button>
<button class="type-number">8</button>
<button class="type-number">9</button><br>
<button class="type-number">0</button>

【讨论】：

这个带循环的方法看起来不错，但是不行，是不是有什么问题？
«Run Code Snippet» 在这里 - 它可以工作......也许在复制粘贴阶段出了点问题））
querySelectorAll(".type-number"); — 这是一个类选择器...您的数字按钮必须有一个唯一的类，才能使用 querySelectorAll 收集它们...并且循环已经添加了所有必需的事件侦听器...您没有'不需要将循环放在numberEvents 函数中......如果必须单独工作。
对不起，我错了，我搞错了。我写了type-buttons 而不是type-number XD...而不是我的代码，你修复并改进了它。非常感谢！