javascript - 我可以使用 if 语句来显示我的数组 (JavaScript) 中的更改吗?
问题描述
我试图让我的函数在每次调用时displayValues()
显示存储在数组中的每个值arrValues
。数组在第二次调用之前会发生变化。
我无法让输出text
显示一个 HTML 元素中的起始值,然后显示第二个元素中的更新值。我不允许让函数返回任何值。目前我的 If 语句只显示更新后的数组。我想知道是什么导致before
元素不显示?
function start() {
var arrValues = [5, 15, 25, 35, 45, 55, 65];
document.getElementById("msg1").innerHTML="Array values before the update:";
displayValues(arrValues);
updateValues(arrValues);
document.getElementById("msg2").innerHTML="Array values after the update:";
displayValues(arrValues);
}
function displayValues(dispVals) {
var i = 0;
var text = "";
var before = document.getElementById("before");
var after = document.getElementById("after");
while (i < dispVals.length) {
text += dispVals[i] + " ";
i++;
}
if (before == "") {
before.innerHTML=text;
} else if (before != "") {
after.innerHTML=text;
}
}
function updateValues(upVals) {
var i = 0;
while (i < upVals.length) {
upVals[i] = upVals[i] + 10;
i++;
}
}
window.onload = start;
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="Updating array values">
<meta name="keywords" content="arrays, display, update">
<meta name="author" content="">
<title></title>
<script src="w8P1.js"></script>
</head>
<body>
<header>
<h2>Arrays</h2>
</header>
<article>
<p><span id="msg1"></span>
<br />
<span id="before"></span>
<br />
<span id="msg2"></span>
<br />
<span id="after"></span>
</p>
</article>
<footer><p>Produced by </p></footer>
</body></html>
解决方案
由于大多数 HTML 元素没有值,您应该使用 innerHTML。更改以下代码行。
if (before.innerHTML == "") {
before.innerHTML=text;
} else if (before != "") {
after.innerHTML=text;
}
推荐阅读
- operating-system - 如何计算物理地址对应哪个虚拟逻辑地址?
- python - 如何将键值对分布在多列中并基于另一列展平矩阵?
- html - 让 div 进入 flex 容器
- ubuntu - 无法将代码服务器安装到 WSL。“系统尚未使用 systemd 作为 init 系统 (PID 1) 启动。无法运行。”
- python - 检测带有标记的 PDF 页面?
- flutter - Flutter: Package can't load a string resource using rootBundle.loadString - asset indenting correct
- excel - INDEX MATCH 唯一值的 Excel TEXTJOIN
- apache-kafka - 如何使用 Kafka REST 代理处理背压
- c++ - 在不锁定 Mutex 的情况下读取受 Mutex 保护的共享数据
- c# - 通过list c#同时检查多个字符串