【问题标题】:Why isn't onClick working for my button?为什么 onClick 不适用于我的按钮?
【发布时间】:2018-04-24 20:21:38
【问题描述】:

我正在尝试“猜!”按钮从我的 JavaScript 文件运行一个函数(创建一个刽子手游戏),但是当我单击该按钮时它似乎没有做任何事情。我已经仔细检查以确保我猜的是一个正确的字母,但一切似乎仍然是下划线。我在 HTML 页面的按钮中使用 onClick 时是否做错了什么?

代码:

//create array for words
var listWords = ['cat', 'dog', 'mouse'];

//displays the word in underscores
var hiddenWord = [];

//choose word randomly
//Math.random returns integer between 0 (inclusive) and 1 (exclusive)
//multiply Math.random with the length of the listWords array
//Math.floor rounds down to nearest integer
//note that array indexes start counting from 0, hence why we need to make sure the listWords index never reaches the actual length of the array
var chosenWord = listWords[Math.floor(Math.random() * listWords.length)];

//number of tries the user gets before game over
var lives = 5;

//connected string of underscores that player sees in place of the chosenWord
var answerString;

//function creating underscores to be displayed in place of chosenWord
function hideWord() {
  //for each letter in the chosenWord, replace it with an underscore in the new array
  for (var i = 0; i < chosenWord.length; i++) {
    hiddenWord[i] = '_';
  }
  //joins each underscore (element) of the hiddenWord array into a string with a space in between each
  answerString = hiddenWord.join(' ');

  //return the new string with spaces in between the underscores
  return answerString;
}

function compareLetter() {
  //get the letter that the player typed in the text box
  var guess = document.getElementById("guessedLetter").value;

  //checking to see if player typed a letter
  if (guess > 0) {

    //compare the player input letter to the answer by moving through the chosenWord's array
    for (var i = 0; i < chosenWord.length; i++) {

      //if the player's letter matches one in the chosenWord, then display it
      if (chosenWord[i] === guess) {
        hiddenWord[i] = guess;
      }
    }
    answerString = hiddenWord.join(' ');
    document.getElementById('hiddenWord').innerHTML = answerString;
  }
}


//main function where actions are performed; where the other functions are called
function main() {
  //creating the underscores to hide the chosenWord from the player
  var underscores = document.getElementById("hiddenWord");
  underscores.innerHTML = hideWord();
}
<!DOCTYPE html>
<html>

<head>
  <!--title to appear on the tab of the browser-->
  <title>Midterm: Hangman</title>

  <!--linking a CSS style sheet for the page-->
  <link rel="stylesheet" type="type/css" href="hangman.css">


  <!--running the hangman game-->
  <script src="hangman.js"></script>
</head>

<!--run the main function from the javascript file when page is loaded-->

<body onLoad="javascript:main()">
  <!--adding a title that will appear on the webpage-->
  <h1>Hangman</h1>

  <!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
  <input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />

  <!--create a button to submit guessed letter and run the compareLetter function when clicked-->
  <button type="button" onClick="javascript:compareLetter()">Guess!</button>

  <!--underscores to hide the word that the player is guessing-->
  <div id="hiddenWord"></div>

  <!--add instructions for the player-->
  <h2>Instructions</h2>

</body>

</html>

【问题讨论】:

  • 仅供参考,您无需将javascript: 放入onXXX 属性中。只有在包含 URL 的属性中才需要。

标签: javascript html arrays button onclick


【解决方案1】:

onClick 工作正常,您必须像这样检查guess 变量的长度:

if (guess.length > 0) {
   // ...
}

您当前的操作方式是,将(可能为空的)字符串与数字 (0) 进行比较,结果可能与您的想法不同,请参阅 JavaScript 中的 falsytruthy

注意:输入的值始终作为字符串检索,即使它只包含数字。

//create array for words
var listWords = ['cat', 'dog', 'mouse'];

//displays the word in underscores
var hiddenWord = [];

//choose word randomly
//Math.random returns integer between 0 (inclusive) and 1 (exclusive)
//multiply Math.random with the length of the listWords array
//Math.floor rounds down to nearest integer
//note that array indexes start counting from 0, hence why we need to make sure the listWords index never reaches the actual length of the array
var chosenWord = listWords[Math.floor(Math.random() * listWords.length)];

//number of tries the user gets before game over
var lives = 5;

//connected string of underscores that player sees in place of the chosenWord
var answerString;

//function creating underscores to be displayed in place of chosenWord
function hideWord() {
  //for each letter in the chosenWord, replace it with an underscore in the new array
  for (var i = 0; i < chosenWord.length; i++) {
    hiddenWord[i] = '_';
  }
  //joins each underscore (element) of the hiddenWord array into a string with a space in between each
  answerString = hiddenWord.join(' ');

  //return the new string with spaces in between the underscores
  return answerString;
}

function compareLetter() {
  console.log('click')
  //get the letter that the player typed in the text box
  var guess = document.getElementById("guessedLetter").value;
console.log(guess);
  //checking to see if player typed a letter
  if (guess.length > 0) {
console.log('yes');
    //compare the player input letter to the answer by moving through the chosenWord's array
    for (var i = 0; i < chosenWord.length; i++) {

      //if the player's letter matches one in the chosenWord, then display it
      if (chosenWord[i] === guess) {
        hiddenWord[i] = guess;
      }
    }
    answerString = hiddenWord.join(' ');
    document.getElementById('hiddenWord').innerHTML = answerString;
  } else {
  console.log('no');
  }
}


//main function where actions are performed; where the other functions are called
function main() {
  //creating the underscores to hide the chosenWord from the player
  var underscores = document.getElementById("hiddenWord");
  underscores.innerHTML = hideWord();
}
<!--run the main function from the javascript file when page is loaded-->

<body onLoad="javascript:main()">
  <!--adding a title that will appear on the webpage-->
  <h1>Hangman</h1>

  <!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
  <input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />

  <!--create a button to submit guessed letter and run the compareLetter function when clicked-->
  <button type="button" onClick="compareLetter()">Guess!</button>

  <!--underscores to hide the word that the player is guessing-->
  <div id="hiddenWord"></div>

  <!--add instructions for the player-->
  <h2>Instructions</h2>
</body>

【讨论】:

  • 啊!我明白了,非常感谢!所以据我了解,用户输入是作为字符串读入的,这就是为什么只使用“guess”不起作用?
  • 输入的值总是作为字符串检索,即使它只包含数字。
猜你喜欢
  • 2021-06-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-05-31
  • 2015-05-01
  • 1970-01-01
  • 2021-12-23
  • 2018-03-10
相关资源
最近更新 更多