为何将.innerHTML存入变量后If语句无法正常工作？

先看你写的代码：

<button class="js-button" onclick="
    let buttonElement = document.querySelector('.js-button').innerHTML;

    if (buttonElement === 'Subscribe') {
      buttonElement = 'Subscribed';
    } else {
      buttonElement = 'Subscribe';
    }
  ">Subscribe</button>

核心原因：变量存储的内容类型完全不同 #

• 第一种写法里，buttonElement = document.querySelector('.js-button').innerHTML 存的是字符串值（也就是按钮当前显示的文本内容，比如'Subscribe'）。你之后修改buttonElement，只是改了这个变量里存的字符串，和页面上的DOM按钮元素没有任何关联——就像你把黑板上的字抄到本子上，改本子上的字，黑板上的字不会有变化。
• 第二种写法（存DOM元素）里，buttonElement = document.querySelector('.js-button') 存的是DOM元素对象本身，这个对象直接对应页面上的按钮。你修改buttonElement.innerHTML，就是直接操作页面上的按钮元素，自然能看到文本切换的效果——相当于你直接拿粉笔改黑板上的字，当场就能看到变化。

如果要让第一种思路生效，你得在修改变量后，把新的值赋值回按钮的innerHTML，比如：

<button class="js-button" onclick="
    let buttonElement = document.querySelector('.js-button');
    let currentText = buttonElement.innerHTML;

    if (currentText === 'Subscribe') {
      buttonElement.innerHTML = 'Subscribed';
    } else {
      buttonElement.innerHTML = 'Subscribe';
    }
  ">Subscribe</button>

内容的提问来源于stack exchange，提问作者Shailesh