HTML中的Javascript，努力使for循环为按钮工作答案

【问题标题】：Javascript in HTML, struggling to make a for loop work for a buttonHTML中的Javascript，努力使for循环为按钮工作
【发布时间】：2021-02-25 22:49:59
【问题描述】：

我正在尝试在 HTML 中使用 JavaScript，但遇到了一些麻烦。我现在的目标是拥有一个按钮，当按下该按钮时，它会打印出一系列中断和降为 1 的数字，就像倒计时一样。一旦我在页面中实现了该功能，我将在一个文本框中工作，用户可以使用该文本框来拥有自己的倒数到 1 的数字。非常简单，但我碰壁了。我正在尝试使用与 HTML 文件位于同一文件夹中的 .js 库来执行此操作。这是我的 HTML 的外观：

<!doctype html>
<!-- project10.html -->

<html>
    <head>
        Hello!
    </head>
    <body>
        <title>Testing Function</title>
        <script type="text/javascript" src="test.js"></script>
        <p id="demo" onclick="myFunction(5)">Click this text to show a countdown.</p>
    </body>
</html>

不是最干净的，我知道。这是位于同一文件夹中的 test.js：

function myFunction(b2){
    for (i=b2;i>0;i--){
    document.getElementById("demo").innerHTML = i;
    document.getElementById("demo").innerHTML = "<br>";
    }
}

【问题讨论】：

5<1 永远不会是真的
试试改成i > 0
成功。谢谢你。但是，当我单击文本时，它只会删除文本，将其替换为任何内容。
对，因为innerHTML = 'thing' 替换了值，所以它不会追加它。 .innerHTML += i +'<br>'; .... += 将追加
我什至不知道 += 是 .innerHTML 的东西......并且尝试它......它奏效了。哇。谢谢一帮朋友。希望几年后我能这么流利......

标签： javascript html function for-loop innerhtml

【解决方案1】：

正如我看到的问题，任务是为函数提供一个数字，并按降序输出。

我创建了一个 ul 元素，您可以在循环的每次迭代中附加一个 li 标记，以便您可以看到数字倒计时。

我还将p 元素更改为button，因为这更适合给定任务，您通常单击按钮，而不是段落。

<html>
    <head>
        Hello!
    </head>
    <body>
        <title>Testing Function</title>
        <script type="text/javascript" src="test.js"></script>
        <button onclick="myFunction(5)">
        Click this text to show a countdown.
        </button>
        <ul id='list'>
          
        </ul>
    </body>
</html>

在 Javascript 文件中，我使用了您的循环，更改了传入参数的名称，这样做是为了尽可能具有描述性。

从这里开始，我们倒计时，每个循环都会减少您传入的数字的值，在您的情况下为 5。

在每个循环中，我们创建一个新的 li 元素，然后将 innerHTML 添加到它，该值是循环中的当前值，然后将其附加到 ul 元素。

function myFunction(number){
    const ul = document.getElementById('list')
    
    for (i = number; i > 0; i--){
      let item = document.createElement('li')
      item.innerHTML = i
      ul.appendChild(item)
    }
}

【讨论】：

虽然这样的答案可能会解决问题代码，但 SO 不欢迎答案。您应该解释其中的代码或更改，以便 OP 真正学到一些东西。