Question

当我在浏览器中使用javascript文件执行html文件时，这些函数可以正常运行，但是我只能执行底部的doorImage.onclick函数或startButton.onclick函数。我的意思是，该页面以关闭的门的图像开头，我可以单击门并将其更改为指定的图像，并且在单击“开始”按钮时无法进行任何更改，或者可以单击“开始”按钮并无法从关闭状态更改门。有人可以帮助我理解为什么仅执行这些功能之一的原因，而不是我应该怎么做？

我尝试将变量类型从let更改为const，但没有任何改变。

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');

const startButton = document.getElementById('start');

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
let closedDoor = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

const randomChoreDoorGenerator = () => {
  var choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 0) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;

  } else if (choreDoor === 1) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;

  } else if (choredoor === 2) {
    openDoor3 = botDoorPath;
    openDoor1 = spaceDoorPath;
    openDoor2 = beachDoorPath;
  }
}

doorImage1.onclick = () => {
  doorImage1.src = openDoor1;
}
doorImage2.onclick = () => {
  doorImage2.src = openDoor2;
}
doorImage3.onclick = () => {
  doorImage3.src = openDoor3;
}

startButton.onclick = () => {
  doorImage1.src = closedDoor;
  doorImage2.src = closedDoor;
  doorImage3.src = closedDoor;
}

<!DOCTYPE html>
<html>

<head>
  <title>Chore Door!</title>
  <link href="css/robodoor.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="header">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg" />
  </div>
  <div class="title-row">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
    <p class="instructions-title">Instructions</p>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
  </div>
  <table class="Instructions-row">
    <tr>
      <td class="instructions-number">1</td>
      <td class="instructions-text">
        Hiding behind one of these doors is the ChoreBot
      </td>
    </tr>
    <tr>
      <td class="instructions-number">2</td>
      <td class="instructions-text">
        Your mission is to open all of the doors without running into the ChoreBot.
      </td>
    </tr>
    <tr>
      <td class="instructions-number">3</td>
      <td class="instructions-text">
        If you manage to avoid the ChoreBot until you open the very last door, you win!
      </td>
    </tr>
    <tr>
      <td class="instructions-number">4</td>
      <td class="instructions-text">
        See if you can score a winning streak!
      </td>
    </tr>
  </table>
  <div class="door-row">
    <img id="door1" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    <script type="text/javascript" src="js/robodoor.js"></script>
  </div>
  <div id="start" class="start-row">
    Good Luck
  </div>
</body>

</html>

openDoor1、2、3和closedDoor均已正确声明并分配给图像。

Answer 1

当前代码的问题在于，声明了将路径分配给openDoor1，openDoor2和openDoor3的函数，但从未调用过。

要解决此问题，只需在将功能分配给randomChoreDoorGenerator之后添加以下代码行即可：

randomChoreDoorGenerator();

不需要在代码中显式调用开始按钮功能，因为在后台，浏览器会看到已单击开始按钮，并将执行分配给开始按钮的onclick事件的功能自动。

Answer 2

您需要为 openDoor1，openDoor2和openDoor3 调用randomChoreDoorGenerator（）来填充图像源的值。

此外，每次要为所有三个门填充随机值时，都必须调用randomChoreDoorGenerator（）函数。

您可以从每个门的onclick函数调用 randomChoreDoorGenerator（）来每次获取随机值。

为什么只有这些功能之一执行

2 个答案: