我的输出有什么问题？答案

【问题标题】：What`s wrong with my output?我的输出有什么问题？
【发布时间】：2015-09-19 17:58:10
【问题描述】：

我正在尝试做一个猜数字游戏，它的正确输出应该逐行显示：尝试 1 你的猜测 xx 太小（大）尝试 2 你的猜测 xx 太小（大）尝试 2 你的猜测 xx 太小（大） ...

但我的输出总是在同一行发生变化，如下所示：尝试 3 你的猜测 xx 太小（大）我不知道问题，请帮助。

<html>
<head> <title> Guessing game </title>
</head>
<body onload="noGen()" >
<script type = "text/javascript">
var theNumber;
function noGen(){ 
theNumber= Math.floor(Math.random()*999+0) ; //get a random number 
}
</script>
<h1> Guessing game </h1>
<p> You have 10 chances! </p>
<p>Hint: the number is between 0 and 999 </p>

<p id="myguess"> </p>
<p>
<input id="tryno" type="text" />
<input type="button" value="GUESS" onclick="attempt()" />
</p>
<script type= "text/javascript">
i=0;
function attempt(){ 
var guess=document.getElementById('tryno');
var myNumber=guess.value;
i++;
if(i<11)
     { 
if (myNumber<theNumber){
       document.getElementById("myguess").innerHTML="Attempt  "+i+" Your    guess "+ myNumber+ " is too small";

}
else if (myNumber>theNumber) 
   {document.getElementById("myguess").innerHTML="Attempt "+i+"  Your guess "+ myNumber+ " is too big";

}

else if (myNumber==theNumber){ 
document.getElementById("myguess").innerHTML="Attempt "+i+"  Your guess "+ myNumber+ " is correct"; 
 document.getElementById("info").innerHTML= "You win!";}  }
else
  {  document.getElementById("info").innerHTML= "You lose!";}

}

</script>
<p id="info"></p>
</body>
</html>

【问题讨论】：

我没有立即看到任何错误。我建议你写一个函数outputResults(guess, i){} 来处理写消息。然后你也可以在那个函数里面做console.log(i, guess, theNumber)，用F12控制台更容易诊断问题

标签： javascript output

【解决方案1】：

如果您想保留以前的结果并继续将它们添加到列表中，请尝试以下操作：

if (myNumber<theNumber){
            var parSmall = document.createElement("P");
            var ansSmall = document.createTextNode("\nAttempt  "+i+" Your    guess "+ myNumber+ " is too small");
            parSmall.appendChild(ansSmall);
            document.getElementById("myguess").appendChild(parSmall);


        }
        else if (myNumber>theNumber) {
            var par = document.createElement("P");
            var ans = document.createTextNode("\nAttempt "+i+"  Your guess "+ myNumber+ " is too big");
            par.appendChild(ans);
            document.getElementById("myguess").appendChild(par);

编辑：innerHTML 改变了 div 的内容，而这增加了新的

元素和新文本到 div 所以你应该得到：

<p> guess one
<p> guess two
<p> guess three

等等

【讨论】：