如何在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屏幕上打印所有按键？

回答

相关问题