如何更改char js的innerHTML

Question

我想做一个Hangman游戏，所以我可以学习JavaScript，我不知道如何更改我在js中制作的char的innerHTML。 因此，当我知道字符串是否包含猜测时，我想将代表正确猜测的行转换为字符并使其显示，但是当我运行代码时，它会将最后一行转换为正确的猜测并使当有新的猜测时它会消失，并将这条线转换为第二个正确的猜测。 并且不 reconizez 'o'（字符串中的最后一个字符）如果我犯了语法错误，我想道歉。

 //defineing the word var a = 'hello'; // makes the lines for ( var i=0; i<a.length; i++){ var letter = document.createElement("h3"); letter.className = 'letter'+i; var j = 2*i+23; letter.style ="position: absolute;"+"top: 14%;"+"left: "+j+"%;"; letter.innerHTML = "_"; document.body.appendChild(letter); } //submit btn gets the input and if it's correct shows it, if it isn't correct than puts into a wrong words function submt(a,letter){ var inpt = document.getElementById('input'); if (a.includes(inpt.value)){ letter.innerHTML = a[a.indexOf(inpt.value)]; }else { console.log('wrong') } }

 <.DOCTYPE html> <html lang="en"> <head> <title>Hangman</title> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet"> </head> <body> <p class='letter'>Write the letter in here:</p> <p class='bad'> the wrong letters:</p> <p class='word'>the word,</p> <input type="text" class="input" id="input"> <button class="sub" id='submit' onclick="submt(a.letter)">submit</button> <script src="script.js"></script> </body> </html>

Answer 1

您正在将 letter 变量重置为最后一个 h3 元素。 每个插槽都需要一个数组。

 //defineing the word var a = 'hello'; // makes the lines var letters = []; // this array store the h3 elements for ( var i=0; i<a.length; i++){ var letter = document.createElement("h3"); letter.className = 'letter'+i; var j = 2*i+23; letter.style ="position: absolute;"+"top: 14%;"+"left: "+j+"%;"; letter.innerHTML = "_"; document.body.appendChild(letter); letters.push(letter); // add element to array } //submit btn gets the input and if it's correct shows it, if it isn't correct than puts into a wrong words function submt(a,letter){ var inpt = document.getElementById('input'); if (a.includes(inpt.value)){ var l = 0, result = []; while (l<a.split('').length) { if (a.split('')[l] == inpt.value) { // a split('') turns the word into an array so it is easier to search result.push(l); // this store the position of the correct letter in the word } l++; } var l = 0; while (l<result.length) { letters[result[l]].innerHTML = a.split('')[result[l]]; // change the h3 elements content to the correct letter using the result array. l++; } }else { console.log('wrong') } }

 <.DOCTYPE html> <html lang="en"> <head> <title>Hangman</title> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet"> </head> <body> <p class='letter'>Write the letter in here:</p> <p class='bad'> the wrong letters:</p> <p class='word'>the word,</p> <input type="text" class="input" id="input"> <button class="sub" id='submit' onclick="submt(a.letter)">submit</button> <script src="script.js"></script> </body> </html>

Answer 2

您当前始终访问创建的最后一个破折号。 那是因为 createElement 将为单词中的每个字符创建一个 h3 元素。

for ( var i=0; i<a.length; i++){
        var letter = document.createElement("h3");
        ...
}

在循环之后，变量var letter将包含最后创建的 h3 元素。 您在 for 循环中定义了字母，但在方法中访问它。 它在 javascript 中工作，但有点出乎意料。

我假设您还不熟悉范围。 现在还可以，但也许您也想阅读一些内容以了解未来的进展。

https://www.w3schools.com/js/js_scope.asp

一个接近您的解决方案的解决方案，但它使用数组来保存所有 h3 元素。 请注意，我还删除了submt()的参数，因为您没有使用它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hangman</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet"> 
</head>
<body>
    <p class='letter'>Write the letter in here:</p>
    <p class='bad'> the wrong letters:</p>
    <p class='word'>the word:</p>
    <input type="text" class="input" id="input">
     <button class="sub" id='submit' onclick="submt()">submit</button>
    <script src="script.js"></script>  
</body>
</html>

//defineing the word
var a = 'hello';
// makes the lines 
var letters = []
for ( var i=0; i<a.length; i++){
        var letter = document.createElement("h3");
        letter.className = 'letter'+i;
        var j = 2*i+23;
        letter.style ="position: absolute;"+"top: 14%;"+"left: "+j+"%;";
        letter.innerHTML = "_";
        document.body.appendChild(letter);
        letters.push(letter)
    }  

function submt(){
    var inpt = document.getElementById('input');
    if (a.includes(inpt.value)){
        var index = a.indexOf(inpt.value)
        letters[index].innerHTML = a[index]; 
    }else {
        console.log('wrong')
    }
}

如何更改char js的innerHTML

问题描述

2 个解决方案

解决方案1
3 已采纳 2021-04-26 15:33:02

解决方案2
3 2021-04-26 15:50:09

如何更改char js的innerHTML

问题描述

2 个解决方案

解决方案1 3 已采纳 2021-04-26 15:33:02

解决方案2 3 2021-04-26 15:50:09

解决方案1
3 已采纳 2021-04-26 15:33:02

解决方案2
3 2021-04-26 15:50:09