Question

我想多次打印“ :::”。但是，使用此代码，我只能打印最后一行。如何打印所有这些行？

<body>
    <script>

        function tri(){
            var radius;

            radius = parseInt(document.getElementById("r").value);

            for (var i = 0; i < radius; i++){
                for (var j = 0; j < i; j++){
                    document.getElementById("triOut").innerHTML = ":::";
                }
                document.getElementById("triOut").innerHTML = "<br>";
            }

            for (var i = 0; i < radius; i++){
                for(var j = 0; j < radius-i; j++){
                    document.getElementById("triOut").innerHTML = ":::";
                }
                document.getElementById("triOut").innerHTML = "<br>";
            }

        }

    </script>


    Give me a number <input type="text" id="r"><button onclick="tri()"> Click here! </button>
    <p id="triOut"></p>

</body>

我希望类似

:::
::::::
:::::::::
::::::
:::

相反，我什么都没显示在屏幕上。

Answer 1

在循环中，重复使用=时，您将覆盖输出。您想与+=

连接

function tri() {
  var radius;

  radius = parseInt(document.getElementById("r").value);

  for (var i = 0; i < radius; i++) {
    for (var j = 0; j < i; j++) {
      document.getElementById("triOut").innerHTML += ":::";
    }
    document.getElementById("triOut").innerHTML += "<br>";
  }

  for (var i = 0; i < radius; i++) {
    for (var j = 0; j < radius - i; j++) {
      document.getElementById("triOut").innerHTML += ":::";
    }
    document.getElementById("triOut").innerHTML += "<br>";
  }

}

Give me a number <input type="text" id="r"><button onclick="tri()"> Click here! </button>
<p id="triOut"></p>

如何在不擦除整个页面的情况下添加多行？

1 个答案: