如何在JS屏幕上打印所有按鍵？

我正在研究一個hang子手類型的遊戲，並且我得到了可以在屏幕上顯示的按鍵，但是每次我點擊一個按鍵時，它們似乎都會覆蓋對方。如何在JS屏幕上打印所有按鍵？

如何在屏幕上按順序顯示每個按鍵？

//Possible words to guess and guesses left 
var words = ['jason', 'kaitlyn', 'lora', 'matthew'], 
    guessesLeft = 9; 

//Computer picks random word to guess 
function getItem() { 
    document.getElementById("wordGuess").innerHTML = words[Math.floor(Math.random() * words.length)]; 
} 

//This code captures the keypress and prints it out on the screen 
document.onkeypress = function(evt) { 
    var evt = evt || window.event, 
     charCode = evt.keyCode || evt.which, 
     lettersGuessed = String.fromCharCode(charCode); 

    document.getElementById("lettersGuessed").innerHTML = lettersGuessed; 
    document.getElementById("guessesLeft").innerHTML = guessesLeft; 

    guessesLeft--; 

    // var userGuess = prompt("What word do you guess?"); 
    // if (words.indexOf(userGuess) > -1){ 
    // alert("Your guess is correct.") 
    // }else{ 
    // alert("Your guess is wrong.") 
    // } 

    if (guessesLeft === -1) { 
    alert("You Loose!"); 
    } 
};

來源

2016-02-16 Jason Martocci

你覺得'document.getElementById（「lettersGuessed」）。innerHTML = lettersGuessed;'每次調用它時會怎樣？ – zzzzBov

覆蓋發生在分配lettersGuessed而不是追加它們。

Assigning：（錯誤的行爲）

document.getElementById("lettersGuessed").innerHTML = lettersGuessed;

Appending：（正確的行爲）

document.getElementById("lettersGuessed").innerHTML += lettersGuessed;

之後，你可以看到下面的結果：

//Possible words to guess 
 
var words = ['jason', 'kaitlyn', 'lora', 'matthew']; 
 

 

 

 
//Computer picks random word to guess 
 
function getItem() { 
 
    document.getElementById("wordGuess").innerHTML = words[Math.floor(Math.random() * words.length)]; 
 
} 
 

 
//This code captures the keypress and prints it out on the screen 
 
var guessesLeft = 9; 
 

 
document.onkeypress = function(evt) { 
 
    var evt = evt || window.event; 
 
    var charCode = evt.keyCode || evt.which; 
 
    var lettersGuessed = String.fromCharCode(charCode); 
 
    document.getElementById("lettersGuessed").innerHTML += lettersGuessed; 
 
    document.getElementById("guessesLeft").innerHTML = guessesLeft; 
 
    guessesLeft--; 
 

 
    // var userGuess = prompt("What word do you guess?"); 
 
    // if (words.indexOf(userGuess) > -1){ 
 
    // alert("Your guess is correct.") 
 
    // }else{ 
 
    // alert("Your guess is wrong.") 
 
    // } 
 

 

 
    if (guessesLeft === -1) { 
 
    alert("You Loose!"); 
 
    } 
 
};

<!-- Example HTML code ---> 
 
<div id="wordGuess">abcdefg</div> 
 
<div id="lettersGuessed"></div> 
 
<div id="guessesLeft"></div>

來源

2016-02-16 21:00:39 AGE

謝謝你的作品。 –

您正在覆蓋每個按鍵上的#lettersGuessed。你應該這樣做：

document.getElementById("lettersGuessed").innerHTML += lettersGuessed;

但我建議將字母添加到數組並檢查從那裏的一切。

來源

2016-02-16 20:59:22

如何在JS屏幕上打印所有按鍵？

回答

相關問題