javascript - 如何使用纯js更改按钮内显示的文本？

Question

我是编码初学者，想知道你们是否可以提供帮助。

我在网上看到了很多关于使用 innerHTML、textContent、value 等来更改标签显示文本的内容但我无法让它在屏幕上实际改变。

注意:console.log 确实会触发并在控制台中显示预期的文本和正确的内容，但按钮内容在窗口中不会更改。

这是我的 html:

<h1 id="myHeading" class="red">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<button id="myButton">click me</button>

这是我的 JavaScript:

const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById('myButton');
let buttonText = myButton.innerText;
console.log(buttonText);

myButton.addEventListener('click', function toggleColor() {
  let whatClass = myHeading.classList;


  if (whatClass.contains('red')) {
    whatClass.remove('red');
    whatClass.add('yellow');
    buttonText = 'Click me to change text to Red!';
    console.log(buttonText);
  } else if (whatClass.contains('yellow')) {
    whatClass.remove('yellow');
    whatClass.add('red');
    buttonText = 'Click me to change text to Yellow!';
    console.log(buttonText);
  }
});

提前致谢，请不要太严厉!

Answer 1

您必须实际设置文本。 :-)

myButton.innerHTML = buttonText;

哎呀，我脑子里有 jQuery!