Javascript中带有For循环的innerHTML

Posted

技术标签:

【中文标题】Javascript中带有For循环的innerHTML【英文标题】:innerHTML with For Loop in Javascript 【发布时间】:2012-10-11 09:31:39 【问题描述】:

这是我的编码。在这个编码中,我想在

中的 innerhtml 中打印表格

段落标记。这是有效的,但问题是当我单击提交按钮时,此结果仅显示最后一个值,例如“10 * 10 = 100”,但我想运行我在代码中从 1 到 10 定义的完整循环。请解决这个问题。

<html>
<head>
<title>Table Program</title>
</head>
<body>
<input type="text" id="table" placeholder="Enter table"/>
<input type="button" value="Submit" onClick="table()"/>
<p id="demo"></p>
<!----------------------------------------------------------------------------------------------->
<script type="text/javascript">
function table()

    var value = document.getElementById("table").value;
    var demop = document.getElementById("demo");
    var a;
    for(a=1; a <= 10;++a)
    
        demop.innerHTML=(value+"*"+ a +"="+ value*a);
    
    
</script>
</body>
</html>

【问题讨论】:

【参考方案1】:

您的for 循环在每次执行时都会覆盖demop 的innerHTML。 因此,当您的 for 循环到达最后一次迭代时,a 将是 10,因此您只会得到最后一个值“10*10=100”

因此,您应该在每次迭代 for 循环时附加结果 就这样吧

demop.innerHTML += (value + "*" + a + "=" + (value*a) + "&lt;br /&gt;");

因此,您将在单独的行中获得输出。

【讨论】:

感谢您的帮助。先生,您是绝对正确的。我已经这样做了,但现在我的另一个问题是我想在请求新表时清除表请告诉我该怎么办?? 第二个问题做一件事,在你的for循环之前写下这段代码demop.innerHTML = "",这样它就会清除你&lt;p&gt;标签中的所有内容 你能告诉我哪个网站或哪个公司的教程最好(所有编程教程)。 我浏览了许多网站,但没有一个是所有教程的一站式服务。您应该查看许多网站以满足您的需要,因为每个网站都有一些特殊的内容需要了解,而不是依赖于单个网站。【参考方案2】:

当您调用demop.innerHTML = something 时,您每次都会覆盖它。 您应该:

将整个字符串放入一个临时的result变量中,然后交给innerHTML

通过做连接不同的结果

demop.innerHTML = demop.innerHTML + (value+"*"+ a +"="+ value*a);

【讨论】:

以上是关于Javascript中带有For循环的innerHTML的主要内容,如果未能解决你的问题,请参考以下文章

SQL 游标 FOR 循环,模式名称中带有 / 变量

R中带有for循环的多个数据帧上的行名

虚幻引擎 4 (ue4) 中带有自定义 c++ 蓝图函数库的蓝图循环/for/while 节点

for循环中带闭包的Settimeout

javascript中的for循环变体

C;如果我在 while 循环内的 for 循环中放置一个 break