HTML中的Javascript，努力使for循环对按钮起作用_Javascript_Html_Function_For Loop_Innerhtml

HTML中的Javascript，努力使for循环对按钮起作用

javascript html function for-loop

HTML中的Javascript，努力使for循环对按钮起作用,javascript,html,function,for-loop,innerhtml,Javascript,Html,Function,For Loop,Innerhtml,我正在尝试在HTML中使用JavaScript，但遇到了一些问题。我现在的目标是有一个按钮，当按下时，它会打印出一系列的中断，并将数字降到1，就像倒计时一样。一旦我在页面中实现了这个功能，我就会在一个文本框中工作，用户可以使用这个文本框来拥有自己的数字，这个数字可以倒计时到1。很简单，但我遇到了麻烦。我正试图使用与HTML文件位于同一文件夹中的.js库来实现这一点。以下是我的HTML的外观： <!doctype html>

我正在尝试在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>";
    }
}

函数myFunction（b2）{
对于（i=b2；i>0；i--）{
document.getElementById（“demo”）.innerHTML=i；
document.getElementById（“demo”）.innerHTML=“
”；
}
}

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

我已经创建了一个

ul

元素，您可以在循环的每个迭代上附加一个

li

标记，这样您就可以看到数字倒计时了

我还将

元素更改为

按钮

，因为这更适合给定的任务，您通常单击按钮，而不是段落

<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>

5尝试将其更改为i>0
Success。谢谢你。但是，当我单击文本时，它只是删除文本，将其替换为零。对，因为innerHTML='thing'
替换了值，所以它不会附加它<代码>.innerHTML+=i+'
'<代码>+=

will appendI我甚至不知道+=对.innerHTML来说是件好事。。。并且尝试它。。。成功了。哇！谢谢你，朋友。希望几年后我能说得这么流利……虽然这样的答案可能会解决问题，但代码上的答案并不受欢迎。您应该解释代码或其中的更改，以便OP真正了解一些东西。

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)
    }
}