Question

我会在加载时显示带有文本“ Drive”的按钮，该按钮启动一项功能，该功能可使汽车的车轮旋转。当您单击“驱动器”按钮时，另一个按钮将显示文本“停止”。我在javascript中设置按钮的所有.textContent。我希望您第一次单击“驱动器”按钮，将textContent更改为“更快”，如果在此之后单击它，则textContent为“更快！”。如果您已完成驾驶，则可以按“停止”按钮以停止车轮旋转。 “停止”按钮将消失，并设置“更快！”按钮，返回到“驱动器”。

到目前为止，一切正常，但是只有第一次。.之后，它将“ Faster”文本重新设置为“ Drive”，但是当我单击它时，它立即变为“ Faster !!”，跳过“更快”的内容。

我认为这里一定有问题：

  // Set text button to faster
  driveXcar.textContent = "faster";


  driveXcar.onclick = function() {
    driveXcar.textContent = "Faster!!";
  }

我无法正常工作。

以下代码：

// DRIVE BUTTON
let driveXcar = document.getElementById("drive");
driveXcar.addEventListener('click', driveCar);
driveXcar.textContent = "Drive";

//STOP BUTTON
let stopXcar = document.getElementById("stop");
stopXcar.style.display = "none";
stopXcar.textContent = "Stop";

let i = 0;

function driveCar() {
  // Display stop button on click drive
  document.getElementById("stop").style.display = "block";

    let start = setInterval(function () {
    i += 2;

    backLines.forEach(line => {
      line.setAttribute("transform", "rotate(" + i + ", 85, 180)");
      }),
      frontLines.forEach(line => {
        line.setAttribute("transform", "rotate(" + i + ", 336, 180)");
      }),
      backLinesHatchback.forEach(line => {
        line.setAttribute("transform", "rotate(" + i + ", 100, 180)");
      })
  }, 10);

  // Set text button to faster
  driveXcar.textContent = "faster";

  driveXcar.onclick = function() {
    driveXcar.textContent = "Faster!!";
  }


  // Add event listener to stop button
  stopXcar.addEventListener('click', stopCar);

  function stopCar() {
    clearInterval(start);
    driveXcar.textContent = "Drive";
    stopXcar.style.display = "none";
  }
}

Answer 1

在嵌套事件侦听器时需要非常小心，在这种情况下，每次按下驱动器按钮时都会在停止按钮上添加一个新的事件侦听器，这很不好。嵌套事件侦听器被认为是不好的做法，应尽可能避免使用。我已经提出了一种可能的解决方案，您可以在此JS Bin上进行检查。

let state = 'stop'; // 'stop' | 'faster' | 'Faster!!'
let driveXcar = initDriveCar();
let stopXcar = initStopCar();
let start;

function initDriveCar() {
  let driveXcar = document.getElementById("drive");
  driveXcar.addEventListener('click', driveCar);
  driveXcar.textContent = "Drive";
  return driveXcar;
}

function initStopCar() {
  let stopXcar = document.getElementById("stop");
  stopXcar.addEventListener('click', stopCar);
  stopXcar.style.display = "none";
  stopXcar.textContent = "Stop";
  return stopXcar;
}

function driveCar() {
  // Display stop button on click drive
  stopXcar.style.display = "block";

  if (start) {
    clearInterval(start);
  }

  start = setInterval(function () {
    // your logic
  }, 10);

  state = getNextState(state, 'drive');
  if (state === 'faster') {
    driveXcar.textContent = "faster";
  }
  else {
    driveXcar.textContent = "Faster!!";
  }
}

function stopCar() {
  clearInterval(start);
  driveXcar.textContent = "Drive";
  stopXcar.style.display = "none";
  state = getNextState(state, 'stop')
}

function getNextState(state, buttonClicked) {
  if (state === 'stop' && buttonClicked === 'drive') {
    return 'faster';
  }
  else if (state === 'faster' && buttonClicked === 'drive') {
    return 'Faster!!';
  }
  else if (state === 'Faster!!' && buttonClicked === 'drive') {
    return 'Faster!!';
  } // include more conditions if necessary
  else {
    return 'stop';
  }
}

我将代码分成了较小的块，以便于阅读和理解，但是我尝试遵循与您相同的逻辑，但是我添加了state属性来帮助您跟踪汽车的状态。

如何在JavaScript中将多个.textcontents设置为单击事件？

1 个答案: