如何使用按钮激活For循环以显示每个按钮单击的每个单独结果?
问题描述:
我一直在试图找出约3小时多个故障,我的代码最终恢复到这一点。如何使用按钮激活For循环以显示每个按钮单击的每个单独结果?
<html>
<head>
<title>Learning</title>
<script type="text/javascript">
function theMath(userOutput) {
document.getElementById("userOutput").innerHTML = userOutput
}
</script>
</head>
<body>
<p id="userOutput"></p>
<p> Counting from one to ten</p>
<input type="button" id="btnOutput" value="Add a number!" />
<p></p>
<script>
var strOutput = "";
var i;
for (i = 0; i <= 10; i++) {
strOutput = " " + i;
document.write(strOutput)
}
</script>
</body>
</html>
目前所有的数字按钮下出现的,我需要的不过做的是,当我点击btnOutput,for循环(0)显示的第一个数字。当我再次点击btnOutput时,会显示for循环的第二个数字(1)。 因此,每次我点击btnOutput循环运行一次,直到它不能再运行(当我= 11)
没有提及:for循环是我所做的必要的。
答
由于您希望在点击时附加值,因此不需要使用循环。只需捕捉事件并追加到必要的元素即可。
此外,由于您只是试图更新元素的文本,因此您应该尝试使用textContent
而不是innerHTML
。
-
innerHTML
:这将处理传递的字符串为HTML,然后更新必要元素的html。 -
textContent
:这不会做任何处理。它只会更新元素的文本内容。
// To avoid bleeding to global scope.
(function(){
var count = 0;
function theMath(userOutput) {
document.getElementById("userOutput").textContent += userOutput
}
document.getElementById('btnOutput').addEventListener('click', function(){
if(++count <= 10){
theMath(count)
}
})
})()
<p id="userOutput"></p>
<p> Counting from one to ten</p>
<input type="button" id="btnOutput" value="Add a number!" />
<p></p>
答
你并不需要一个for循环,只是增加的数量,并显示一个新号码。
var i = 1;
var maxValue = 11;
document.getElementById("btnOutput").addEventListener("click", function() {
if (i < maxValue) {
document.getElementById("userOutput").innerHTML += (i++) + "<br>";
}
});
<html>
<head>
<title>Learning</title>
</head>
<body>
<p id="userOutput"></p>
<p> Counting from one to ten</p>
<input type="button" id="btnOutput" value="Add a number!" />
<p></p>
</body>
</html>
+0
不幸的是,我必须在这个例子中使用for循环,它实际上需要在我的代码中。我也需要使用一个按钮和功能。 –
答
其实你并不需要一个for循环这一点。只是分配一个全局变量和一个全球性的限制,然后递增值追加到innerHTML
<html>
<head>
<title>Learning</title>
<script type="text/javascript">
var i = 1;
var maximum = 11;
function addnum(){
if (i<maximum) {
document.getElementById("userOutput").innerHTML +=" "+i++;
}
}
</script>
</head>
<body>
<p id="userOutput"></p>
<p> Counting from one to ten</p>
<input type ="button"
id = "btnOutput"
onclick="addnum()"
value = "Add a number!"/>
<p></p>
</body>
</html>
不幸的是我在这种情况下使用一个for循环,它实际上是要求在我的代码。我也需要使用一个按钮和功能。 –