為什么onClick對於我的按鈕不起作用？
[英]Why isn't onClick working for my button?
問題描述
我正在嘗試“猜猜”！ 按鈕可以從我的JavaScript文件運行一個函數（創建一個hangman游戲），但是當我單擊該按鈕時，它似乎沒有任何作用。 我已經仔細檢查過以確保我猜到了正確的字母，但是所有內容似乎都在下划線下。 在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>
1 個解決方案
解決方案1
1 已采納 2018-04-24 20:28:37
onClick可以正常工作，您必須像這樣檢查guess變量的長度：
if (guess.length > 0) {
// ...
}
當前的操作方式是將一個字符串（可能為空）與一個數字（0）進行比較，結果可能與您想的不一樣，請參見JavaScript中的虛假和真實 。
注意：輸入值始終以字符串形式檢索，即使它僅包含數字也是如此。
//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>
onclick不適用於按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.