我想做一个 Hangman 游戏，这样我就可以学习 JavaScript，我不知道如何更改 innerHTML 我在 js 中制作的 char。因此，当我知道字符串是否包含猜测时，我想将代表正确猜测的行转换为字符并使其出现，但是当我运行代码时，它将最后一行变成正确的猜测并使当有新的猜测并将该行转换为第二个正确猜测时，它会消失。并且不 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>最佳答案
您正在将 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>关于javascript - 如何更改char js的innerHTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67269357/