我的代码（link或下面的代码）有一个奇怪的问题。
我想创建一个简单的游戏来练习基本的Javascript。
这个游戏的概念是：给出8个插槽（输入）。用十六进制数字填充所有插槽（00 - FF）。按检查按钮，查看您猜到的值的数量。 （用于比较输入的数字是使用 getRandomHexValues（）随机生成的。
在 js 文件中，函数 checkValues（）生成8个十六进制数字;插入 div＃lotoResult 8 输入（每个都包含一个生成的数字）。 div＃lotoResult 中的每个输入都将 border 显示为红色或绿色，具体取决于值是否正确猜测。然后它添加一个 p 元素，显示有多少错误。
问题是：如果我将 p 元素添加到 div＃lotoResult 的 innerHTML 中， input <中的值/ em> s（由 checkValues（）生成）未显示。如果我不添加 p ，则会显示元素（但我需要此 p ）。
我想了解问题是什么（我已尝试过，但我不能）。你有什么建议吗？
function checkValues() {
var inputs = document.getElementsByName("num");
var inputOk = true;
for (i = 0; i < inputs.length; ++i) {
if (inputs[i].value == "") {
inputOk = false;
break;
}
}
var lotoResult = document.getElementById("lotoResult");
lotoResult.style.visibility = "visible";
if (!inputOk) {
lotoResult.style.color = "red";
lotoResult.innerHTML = "!!! Not all slots are filled.";
} else {
var genValues = getRandomHexValues();
for (i = 0; i < inputs.length; ++i) {
lotoResult.innerHTML += "<input type=\"text\" pattern=\"[a-fA-F0-9]{2}\" name=\"numResult\" readonly />";
}
var lotoResultValues = document.getElementsByName('numResult');
for (i = 0; i < inputs.length; ++i) {
lotoResultValues[i].value = genValues[i];
}
var allValuesTrue = true;
var nrWrongValues = 0;
for (i = 0; i < inputs.length; ++i) {
if (inputs[i].value.toUpperCase() != genValues[i].toUpperCase()) {
allValuesTrue = false;
lotoResultValues[i].style.border = "1px solid red";
nrWrongValues++;
} else
lotoResultValues[i].style.border = "1px solid green";
}
// If I remove if-else, then the values in input elements will be displayed
if (!allValuesTrue) {
lotoResult.style.color = "red";
lotoResult.innerHTML += "<p>!!! " + nrWrongValues + " wrong values.</p>";
} else {
lotoResult.style.color = "green";
lotoResult.innerHTML += "<p>All elements are correct.</p>";
}
}
}
function getRandomHexValues() {
var length = 2;
var chars = "0123456789ABCDEF";
var hex = "";
var hexNums = new Array();
var n = 8;
for (i = 0; i < n; ++i) {
length = 2;
hex = "";
while (length--) hex += chars[Math.floor(Math.random() * 16)];
hexNums[i] = hex;
}
return hexNums;
}body {
margin: 10px auto;
border: 2px solid red;
width: 800px;
}
header {
height: 10%;
color: orange;
width: 500px;
}
section {
padding: 10px;
border: 1px solid blue;
display: block;
width: 600px;
float: left;
margin: 20px 10px;
}
section p {
color: red;
display: inline-block;
margin: 10px 10px;
}
footer {
clear: both;
margin-top: 50px;
}
footer p {
text-align: center;
}
#S2 h1 {
margin-left: 10px;
color: red;
font-family: sans-serif;
}
#S2 div {
margin: 0 auto;
width: 400px;
}
#S2 div input {
width: 30px;
border: 1px solid blue;
color: blue;
}
#S2 p {
display: block;
color: blue;
font-family: monospace;
}
#S2 .buttonSubmit {
border-radius: 3px;
border: 1.5px solid blue;
width: 60px;
position: relative;
left: 20px;
transition: background-color 1s;
}
#S2 .buttonSubmit:hover {
background: rgba(26, 198, 255, 0.7);
}
#S2 .buttonSubmit:active {
color: red;
}
#S2 #lotoResult {
text-align: center;
margin-top: 5px;
visibility: hidden;
color: blue;
border: 1px solid orange;
padding: 10px;
}<header>
<h1>HelloJavascript</h1>
</header>
<nav>
</nav>
<section id="S2">
<h1>Game</h1>
<p>Insert the numbers below:</p>
<div class="tabs">
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input type="text" pattern="[a-fA-F0-9]{2}" name="num" />
<input class="buttonSubmit" type="button" onclick="checkValues()" value="Check" />
</div>
<div id="lotoResult"></div>
</section>
<footer>
<p>
© 2016
</p>
</footer>
答案 0 :(得分：1)
这是因为您在注释代码中使用了对象dom操作，并且在段落连接中使用了字符串dom操作。
<强>编辑：
for (i = 0; i < inputs.length; ++i)
{
lotoResult.innerHTML += "<input type=\"text\" pattern=\"[a-fA-F0-9]{2}\" name=\"numResult\" readonly value=\""+genValues[i]+"\" />";
}
//var lotoResultValues = document.getElementsByName('numResult');
//for (i = 0; i < inputs.length; ++i) {
// lotoResultValues[i].value = genValues[i];
// }
答案 1 :(得分：1)
使用innerHTML并不是最佳实践。进行“真正的”DOM操作将解决您的问题：
if (!allValuesTrue) {
lotoResult.style.color = "red";
//lotoResult.innerHTML += "<p>!!! " + nrWrongValues + " wrong values.</p>";
var para = document.createElement('p');
para.appendChild(document.createTextNode("!!! " + nrWrongValues + " wrong values."));
lotoResult.appendChild(para);
}