HTML中的Javascript，努力使for循环为按钮工作
Posted
技术标签:
【中文标题】HTML中的Javascript，努力使for循环为按钮工作【英文标题】：Javascript in HTML, struggling to make a for loop work for a button 【发布时间】：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 的东西......并且尝试它......它奏效了。哇。谢谢一帮朋友。希望几年后我能这么流利......
【参考方案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 真正学到一些东西。以上是关于HTML中的Javascript，努力使for循环为按钮工作的主要内容，如果未能解决你的问题，请参考以下文章