Question

我刚刚开始尝试学习javascript并遇到了问题。下面的代码我希望看到我的输入框和按钮后跟1,2，... 10。新行上的每个数字。我得到的是方框下方的数字10。我没有看到数字1,2，... 9

<html>

<head>
  <title>Test</title>
</head>
<style>
  #pastetext {
    color: blue;
    font-weight: bold;
  }
  .enter {
    border: 2px solid blue;
    width: 200px;
    height: 50px;
  }
</style>

<script type="text/javascript">
  function abc() {
    intext = document.getElementById("pastetext").value;
    for (i = 1; i < 11; i++) {
      document.getElementById("answer").innerHTML = i;
    }
  }
</script>


<body>

  <input type="text" name="enter" class="enter" value="" id="pastetext" />
  <input type="button" id="btn" value="Click to Enter Data" onclick="abc();" />

  <div id="answer" style="color:red; padding-left:100px;">
  </div>

</body>

</html>

我得到的是：enter image here

Answer 1

您一遍又一遍地设置innerHTML属性。设置正确完全取代以前的内容。

您可以附加文字：

function abc(){
   var intext = document.getElementById("pastetext").value;
   var answer = document.getElementById("answer");
   answer.innerHTML = "";
   for(var i=1; i <11; i++){
       answer.innerHTML += i + " ";
   }
}

请注意，函数中的局部变量应使用var声明。

document.getElementById没有换行符

1 个答案: