更改按钮文本内容的问题

Question

我正在 Javascript 制作一款战舰游戏，但我遇到了更改按钮文本内容的功能的问题。我想在用户单击按钮时按钮的文本内容发生变化。

function changePosition(eventBtn){
if(eventBtn.target.textContent=='perpendicularly'){
    eventBtn.target.textContent='horizontally';
}
else{
    eventBtn.target.textContent='perpendicularly';
}}

但是当我点击按钮时没有任何变化。我认为问题出在 else 语句上，因为当我删除该语句时，一切正常。

Answer 1

确保您将侦听器适当地添加到按钮。

function changePosition(event) {
  if (event.target.textContent === 'Perpendicularly') {
    event.target.textContent = 'Horizontally';
  } else {
    event.target.textContent = 'Perpendicularly';
  }
}

document.querySelector('.direction').addEventListener('click', changePosition);

<button class="direction">Perpendicularly</button>

关于以下声明：

But when I click on the button nothing changes. I think the problem is with the else statement because when I delete this statement all work.

您的活动可能会触发两次。它可能会两次调用您的事件侦听器，有效地恢复它刚刚对文本所做的更改。

改进建议

魔术字符串不好，我建议改用可枚举值。

const Direction = {
  PERPENDICULARLY: 'Perpendicularly',
  HORIZONTALLY: 'Horizontally'
};

const changePosition = event => {
  event.target.textContent =
    event.target.textContent === Direction.PERPENDICULARLY
      ? Direction.HORIZONTALLY
      : Direction.PERPENDICULARLY
};

document.querySelector('.direction').addEventListener('click', changePosition);

<button class="direction">Perpendicularly</button>

更改按钮文本内容的问题

Problem with changing button text content

javascript

dom-events

改进建议