首页 > 解决方案 > 我可以使用 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>

标签: javascripthtml

解决方案


由于大多数 HTML 元素没有值,您应该使用 innerHTML。更改以下代码行。

if (before.innerHTML == "") {
        before.innerHTML=text;
    } else if (before != "") {
        after.innerHTML=text;
    }

推荐阅读