案例/开关未激活onClick事件

Posted 2021-03-28

我正在使用vanilla javascript重新创建Fallout终端游戏---游戏的主要元素之一是将您选择的单词与计算机选择的单词进行比较。

黑客游戏类似于棋盘游戏Mastermind。您将看到一个单词列表，所有相同的字符长度...其中一个单词是正确的密码，您的目标是猜测它。

您可以通过单击选择一个单词。如果您没有正确猜测，终端将显示“x / y correct”，其中x是正确字母的数量，y是字长。只有在正确的位置，信件才是正确的。

我在控制台中使用了比较方面，我最近能够将案例0部分显示在屏幕上，但是当我点击另一个单词时，它不会加载下一行“三次尝试剩余”。

我不确定我的代码是否显而易见，或者我完全错过了什么，所以我想我会在这里问一下。

.js文件：

var giantArray = []; // combination of var garbage and var words

var goalWord = ""; // word that the computer chose to be the "goal"  // STRING

var userWord = ""; // the current word that the user selected // STRING

var playerAttempts = 0; // how many past attempts the user has made

---

var shuffledWords = shuffle(words); // randomly pick an index between 0 and 35

document.addEventListener("DOMContentLoaded", function(event) {
  createAttempt();

});

---

function createAttempt() {
  switch (playerAttempts) {
    case 0:
      attempts.innerhtml = "Four attempts remaining. [] [] [] []";
      break;
    case 1:
      attempts.innerHTML += "Three attempts remaining. [] [] []<br>";
      break;
    case 2:
      attempts.innerHTML += "Two attempts remaining. [] []<br>";
      break;
    case 3:
      attempts.innerHTML += "!! Warning: Lock out pending !! []<br>";
      break;
    default:
      attempts.innerHTML += "This terminal has been locked. Please contact your administrator.";
      break;
  }
  playerAttempts++;

}

createAttempt();

function clickFunc(evt) {
  if (evt.target.innerText.slice(1) === goalWord) { // need .slice method to eliminate space character
  console.log('Welcome back' + '. ');
  } else {
  console.log('try again')
  }
}

clickFunk（）;

HTML：

   <div class="panels"> <!-- level 3 -->

        <div class="top-text"> <!-- level 4 -->
          <ul>
            <li>______ INDUSTRIES (TM) TERMALINK PROTOCOL</li>
            <li>ENTER YOUR PASSWORD</li>
          </ul>
        </div>

    <div id="attempts"></div> <!-- level 4 -->

答案

but when I click on another word it doesn't load the next line "Three attempts remaining."是您问题的关键字。它第一次加载，因为你只调用一次。当你实际点击某些东西（调用你的点击功能）时，你不会再次调用它。您需要在单击函数中调用它来重新调用该函数。因此：

createAttempt();

function clickFunc(evt) {
  createAttempt();
  if (evt.target.innerText.slice(1) === goalWord) { // need .slice method to eliminate space character
  console.log('Welcome back' + '. ');

  } else {
  console.log('try again')
  }
}

现在您将发现每次单击时都会打印，具体取决于交换机的值。

UPDATE

在您发布的实际调用clickFunc调用的代码中没有看到任何内容。您需要告诉它在您点击某些内容时要调用的函数。所以在你的目标元素中，只需将onclick属性设置为指向你的函数，如下：

onclick="clickFunc(event)"