Question

这就是我想要的1,2,3,4,5。 它们应该都是相同的。

但是当我运行我的代码时，我只得到（5）;

有人可以帮忙吗？

<p id= "text-1"> this </p>

p#text-1{
  color:blue;
  font-size:20px;
  padding:10px;
  width:20px;
  height:20px;
  background:gold;
  text-align:center;
}

function forloop(){
  for( x = 0; x<=3; x++){
  document.getElementById('text-1').innerHTML = x;
  }
}
forloop();

Answer 1

如果您尝试以编程方式创建从1到3的列表，那么您可以这样做：

<html>
  <head>
    <style>
      p#text-1{
        color:blue;
        font-size:20px;
        padding:10px;
        width:20px;
        height:20px;
        background:gold;
        text-align:center;
      }
    </style>
    <script>
      function forloop(){
        var MAX = 3;
        for( x=1; x<=MAX; x++) {
          document.getElementById('text-1').innerHTML += x;
          if(x < MAX) {
            document.getElementById('text-1').innerHTML += ", ";
          }
        }
      }
    </script>
  </head>
  <body onLoad="forloop()">
    <p id= "text-1"></p>
  </body>
</html>

请注意，根据您在此处所说的内容，将您想要的内容直接放入页面会更简单。这个答案是基于这样的假设：你不会总是想要一个正好有3个数字的列表。

另请注意，您的div不够宽，无法包含所有3个数字。你需要确保你的样式是你想要的，但这超出了这个答案的范围。

编辑：如果您希望每个数字都在自己的框中，那么它将会像这样更改：

    <style>
     span.numblock {
        color:blue;
        font-size:20px;
        padding:10px;
        width:20px;
        height:20px;
        background:gold;
        text-align:center;
     }
    </style>

和

    <script>
      function forloop(){
        var MAX = 3;
        for( x=1; x<=MAX; x++) {
          document.getElementById('text-1').innerHTML += "<span class='numblock'>"+x+"</span>";
          if(x < MAX) {
            document.getElementById('text-1').innerHTML += ", ";
          }
        }
      }
    </script>

onload（）只是为了让脚本运行。您可能不需要它，具体取决于存在的上下文。

创建具有相同样式的for循环

1 个答案: