.innerHTML在使用For循环时不显示
.innerHTML Not Displaying While Using a For Loop
我正在尝试编写一个脚本,允许用户在屏幕中输入数字,将其添加到数组中,然后在innerHTML元素上打印值。
然而,当我尝试在for循环中使用它时,没有打印出任何内容,它会转到一个新页面,其中唯一显示的是输入的第一个数字。
我是JavaScript新手,可能做得不对。请告诉我!
提前感谢
var a = [];
var count = 0;
function addNum() {
a[count] = document.getElementById('input').value;
count++;
}
function printValues() {
for (i = 0; i < a.length; i++) {
document.write(a[i], " ").innerHTML = array;
}
}
<input type="text" id="input">
<br>
<input type="button" onclick="addNum();" value="Add Number">
<br>
<input type="button" onclick="printValues();" value="Print Numbers">
<p>
<a id="array"></a>
</p>
来自MDN:
注意:当document.write写入文档流时,对已关闭(加载(的文档调用document.write会自动调用document.open,这将清除文档。
所以你的问题是由document.write
引起的。一旦write
到已经加载的文档,其他所有内容都会被丢弃,包括javascript。(你在使用它的过程中也遇到了其他问题,但这是主要问题(。
您有一个id为array
的元素,我认为它是您想要放置数字的地方。因此,您需要使用getElementById
获取该元素,然后设置其innerHTML
。您可以使用array.join
来避免循环。
var a = [];
var count = 0;
function addNum() {
a[count] = document.getElementById('input').value;
count++;
}
function printValues() {
document.getElementById('array').innerHTML = a.join(",");
}
<input type="text" id="input">
<br>
<input type="button" onclick="addNum();" value="Add Number">
<br>
<input type="button" onclick="printValues();" value="Print Numbers">
<p>
<a id="array"></a>
</p>
你还应该考虑其他一些事情。在addNum
中添加数字后,你可能应该通过将value
设置为null来清除文本框。其次,最好在代码中而不是在HTML中添加事件处理程序。
function printValues() {
var strValues=''; // Initialize a temporary variable
for (i = 0; i < a.length; i++) {
strValues += a[i] + ' ';
}
document.write(strValues); //Writting variable to document.
}
在上面的例子中,我们创建了一个临时变量,并将默认值设置为空白。然后在for循环中,我们使用+=符号将数组值连接到变量。
您所做的不是在innerHTML
中设置内容的正确方式。此外,您不会保留要打印到屏幕上的值。每次,你点击打印,用户输入的新值刚刚通过,旧值就会被新值取代。这里,一旦用户完成了他/她的输入,变量valueToBePrinted
将始终记住最后输入的值,因为它将所有输入的值连接到它。
查看以下代码:
var a = [];
var count = 0;
function addNum() {
a[count] = document.getElementById('input').value;
console.log(a[count]);
count++;
}
function printValues() {
var valueToBePrinted='';
for (i=0;i<a.length;i++) {
valueToBePrinted += a[i] + ' ';
console.log(valueToBePrinted)
document.getElementById('array').innerHTML =valueToBePrinted;
}
}
此外,请查看Fiddle中的结果:Fiddle
语句"document.write(a[i],"(.innerHTML=array;"是错误的。代码中没有声明名为数组的变量。
使用document.write打印所有数字的正确形式是
for (i=0;i<a.length;i++) {
document.write(a[i] + " ");
}
如果你需要所有输入数字的总和并打印总和,那么你可以简单地在点击addNumber按钮时将其相加为一个变量,
var total = 0;
function addNum() {
total += Number(document.getElementById('input').value);
}
function printValues() {
document.write(total);
}
- 您通常不会使用"count"变量向数组中添加项,而是将其推送到数组中,但我保留了它,以防您需要它
- 正如其他人所指出的,您不需要对元素执行document.write操作,而是使用innerHTML并替换或附加到该元素
- 同样奇怪的是,您将innerHTML放在链接
<a />
元素中,但由于这就是您正在使用的内容,我将重现它 - 如果您确实想将它们用作数字(整数?(,则需要使用
parseInt(string, radix);
或parsefloat来解析它们 - 您没有将
i
设置为变量对象,所以我在这里这样做了
此处略微修改代码:
var a = [];
var count = 0;
function addNum() {
a.push(parseInt(document.getElementById('input').value, 10));
count++;
}
function printValues() {
var i;
var myValues = "";
for (i = 0; i < a.length; i++) {
myValues = myValues + a[i] + " ";
}
var element = document.getElementById("array");
element.innerHTML = myValues;
}
以下是作为工作示例复制的代码:http://jsfiddle.net/coffw8tg/
- 在ng重复循环中显示来自不同文件夹的图像
- JavaScript循环无法正确计算/显示结果
- 在ng重复循环中显示条件内容的最佳方式是什么
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 在Jade中循环并显示来自Mongodb的数据
- 如何使用for in循环在javascript中显示对象中的对象
- GoogleMapsV3api只显示Javascript循环中的一些标记
- 如何避免试图用php+jquery显示php起始页的无限循环
- javascript:在for循环中使用settimeout来定期显示文本
- 当从jquery的点击事件中的每个循环创建的数组到它之外时,它显示空白数组
- 如何在php循环中显示隐藏的数据类型
- 精灵与身体错位,可以'在显示循环中找不到错误
- 使用javascript显示循环的所有结果
- 如何通过javascript工作程序显示循环进程状态
- 隐藏&使用setInterval显示循环
- 如何使用数组显示循环中的文本
- 在HTML页面中显示循环结果
- 显示循环最后值的谷歌地图信息窗口
- 显示循环迭代