Javascript 从用户输入替换DOM中的数组id-Hangman Game JS_Javascript_Html_Arrays_Dom

Javascript 从用户输入替换DOM中的数组id-Hangman Game JS

javascript html arrays dom

Javascript 从用户输入替换DOM中的数组id-Hangman Game JS,javascript,html,arrays,dom,Javascript,Html,Arrays,Dom,我正在为类制作一个hangman游戏，到目前为止我已经完成了大部分工作，但是如果字符正确，我无法将用户输入替换为DOM上的“u”空间。例如：当用户输入键时，uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu。目前，我有它上面显示，但想它取代空白。同时拆下，'s。任何关于如何做到这一点的帮助都将不胜感激。提前谢谢 HTML: 迪斯尼刽子手游戏迪斯尼刽子手！猜猜下面的迪斯

我正在为类制作一个hangman游戏，到目前为止我已经完成了大部分工作，但是如果字符正确，我无法将用户输入替换为DOM上的“u”空间。例如：当用户输入键时，uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu。目前，我有它上面显示，但想它取代空白。同时拆下，'s。任何关于如何做到这一点的帮助都将不胜感激。提前谢谢

HTML:


迪斯尼刽子手游戏
迪斯尼刽子手！
猜猜下面的迪斯尼电影。
剩余猜测数：

JS:

//迪士尼电影选项数组//
var选项=[“莫阿纳”、“狮子王”、“寻找尼莫”、“阿拉丁”、“木兰”、“丛林书”、“冰冻”、“泰山”、“小美人鱼”、“大英雄6”]；
//从数组中随机选择单词//
var randomPick=options[Math.floor（Math.random（）*options.length）]；
//将拾取的单词拆分为字母数组//
var-word=randomPick.split（[]）；
console.log（word）
//记录用户输入的数组
var userArray=[]；
//计算被拆分的单词的长度
var-length=word.length；
console.log（长度）
//在HTML中显示单词的长度
window.onload=函数（）{
对于（变量i=0；i

您需要什么？在问题中，您似乎想将每个厄运的id更改为特定用户。这是您想要的吗？如果不是，请更好地解释您想要的。我认为问题可能是您将元素的

innerHTML

设置为数组而不是字符串，您只需加入数组并将元素HTML或文本设置为该值，

element.innerHTML=userArray.join（“”）

@MohamedEl Sayed感谢您的建议！这确实删除了“要用有效字符替换

”，您可以使用类似userArray=userArray.map（chr=>word.includes（userInput）？chr:”。
<!Doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Disney Hangman Game</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="assets/js/hangman.js"></script>

</head>

<body>

    <div class="container">
        <div class="jumbotron" align="center">
            <h1>Disney Hangman!</h1>
            <h2>Guess the Disney movie below.</h2>

            <h3 id="userText"> </h3>
            <h3 id="display"> </h3>
            <h3>Number of guesses left: <span id="guesses"></span></h3>
        </div>
    </div>

</body>
</html>

// Array of disney movies options //
var options = ["moana", "lion king", "finding nemo", "aladdin", "mulan", "jungle book", "frozen", "tarzan", "little mermaid", "big hero 6"];

// Randomly select word from array //
var randomPick = options[Math.floor(Math.random()*options.length)];

// Split the word picked into letters array //
var word = randomPick.split([]);
console.log(word)

// Array that records user input
var userArray = [];

// Counts length of the word that is split
var length = word.length;
console.log(length)

// Display length of word in HTML
window.onload = function() {
for (var i = 0; i < length; i++) {
    word[i] = "_";
}
document.getElementById("display").innerHTML = word;
}

// Number of guesses
var guesses = 15;

// Store users inputs into userArray 
document.onkeyup = function(input) {
    console.log(input)
    // var userInput = input.key;
    var userInput = (input.key).toLowerCase();

    //Record Countdown
            if (input.key) {
                guesses--;
                console.log(guesses)

                userArray.push(userInput);
                console.log(userArray)

                if (guesses === 0) {
                    alert("Game Over!")
                }
            }

            for (var i = 0; i < length; i++) {
                if (userInput === word[i]) {
                    userArray.push(userInput);
                    console.log(userArray)
                }
            }

            if (userArray.length === word.length) {
                alert("you win!")
            }

    // Display guess in guesses HTML
    document.getElementById("userText").innerHTML = userArray;
    // Display guesses left in HTML
    document.getElementById('guesses').innerHTML = guesses;
}