Javascript(数组+document.getElementById)

Question

伙计们，我这里有这段代码：

var pinakasPinakas= [2, 43, -21, 25, 34, -9, -50, 60, 12, -3];
var sum=0;
for (var i=0; i<pinakasPinakas.length; i++){
    if (pinakasPinakas [i] >0){
        sum=sum+pinakasPinakas[i];
    }
}
document.getElementById("summy").innerHTML="Sum: " +sum+ ".<br>"



var multi=1;
for (var i=0; i<pinakasPinakas.length; i++){
    if(pinakasPinakas[i] > 0){
    multi=multi*pinakasPinakas[i];
    }
}
document.getElementById("multipl").innerHTML="multi: " +multi+ ".<br>"


for (var i=0; i<pinakasPinakas.length; i++){
if(pinakasPinakas[i]<0){
    document.getElementById("negative").innerHTML=(pinakasPinakas[i]);
    // document.write(pinakasPinakas[i])
}}
//

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 400px;
            background-color: rgb(108, 162, 231);
            border: 1px solid rgb(3, 24, 63);
        }
        li a {
            display: block;
            color: rgb(24, 12, 27);
            text-decoration: none;
            padding: 5px 11px;
        }
        li a:hover:not(.active) {
            background-color: rgb(64, 102, 151);
            color: rgb(15, 30, 37);
        }
        li {
            text-align: center;
            border-bottom: 2px solid rgb(6, 47, 100);
        }
        li:last-child { 
            border-bottom: none;
        }
        li a.active {
            background-color: rgb(0, 82, 189);
            color: rgb(25, 15, 27);
        }

        h2{color: rgb(10, 47, 116);}
        p{color: darkblue;}
    </style>
</head>
<body>
    <ul>
        <li><a href="#page1.html" class="active">Page 1</a></li>
        <li><a href="page2.html"> Page 2</a></li>
    </ul>

    <h2>Πρόσθεση & Γινόμενο θετικών αριθμών</h2>

    <p id="summy"></p>
    <p id="multipl"></p>

    <h2>Εμφάνιση αρνητικών αριθμών</h2>

    <p id="negative"></p>

    <script src="Page1.js"></script>
</body>
</html>

我的"project"是把数组中的正数相乘并相加，每一个都放在一个"ID"里，当然是在我的HTML文件里。所以这很简单，我和你一样在上面做了见。

那么，问题是什么？之后，我还应该像这样显示负值：在 html 文件中的另一个 <p id="negative"> 中。 (-21,-9,-50,-3)。当我将 getElementById 方法与我的 innerHTML 一起使用时，什么也没有出现，但有时当我稍微修改它时，会显示最后一个负值（仅 -3）。当我评论它并取消注释 document.write() 方法时，所有负数都会显示。为什么我用第一种方法会遇到这样的问题？我该如何修复我的代码并最终使用 getElementById？

// 谢谢

Answer 1

只需添加一个加号运算符即可追加 document.getElementById("negative").innerHTML +=(pinakasPinakas[i]);

var pinakasPinakas= [2, 43, -21, 25, 34, -9, -50, 60, 12, -3];
var sum=0;
for (var i=0; i<pinakasPinakas.length; i++){
    if (pinakasPinakas [i] >0){
        sum=sum+pinakasPinakas[i];
    }
}
document.getElementById("summy").innerHTML="Sum: " +sum+ ".<br>"



var multi=1;
for (var i=0; i<pinakasPinakas.length; i++){
    if(pinakasPinakas[i] > 0){
    multi=multi*pinakasPinakas[i];
    }
}
document.getElementById("multipl").innerHTML="multi: " +multi+ ".<br>"


for (var i=0; i<pinakasPinakas.length; i++){
if(pinakasPinakas[i]<0){
    document.getElementById("negative").innerHTML +=(pinakasPinakas[i]);
    // document.write(pinakasPinakas[i])
}}
//

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 400px;
            background-color: rgb(108, 162, 231);
            border: 1px solid rgb(3, 24, 63);
        }
        li a {
            display: block;
            color: rgb(24, 12, 27);
            text-decoration: none;
            padding: 5px 11px;
        }
        li a:hover:not(.active) {
            background-color: rgb(64, 102, 151);
            color: rgb(15, 30, 37);
        }
        li {
            text-align: center;
            border-bottom: 2px solid rgb(6, 47, 100);
        }
        li:last-child { 
            border-bottom: none;
        }
        li a.active {
            background-color: rgb(0, 82, 189);
            color: rgb(25, 15, 27);
        }

        h2{color: rgb(10, 47, 116);}
        p{color: darkblue;}
    </style>
</head>
<body>
    <ul>
        <li><a href="#page1.html" class="active">Page 1</a></li>
        <li><a href="page2.html"> Page 2</a></li>
    </ul>

    <h2>Πρόσθεση & Γινόμενο θετικών αριθμών</h2>

    <p id="summy"></p>
    <p id="multipl"></p>

    <h2>Εμφάνιση αρνητικών αριθμών</h2>

    <p id="negative"></p>

    <script src="Page1.js"></script>
</body>
</html>

Answer 2

将每个元素附加到 html：document.getElementById("negative").innerHTML += pinakasPinakas[i]

如果你写 document.getElementById("negative").innerHTML = pinakasPinakas[i]，html 元素将用迭代中的每个值覆盖内容，最终打印将是最后一个元素。如果要显示迭代中的所有元素，请使用 +=。

另外，尝试重用代码。在这种情况下

var sum=0;
for (var i=0; i<pinakasPinakas.length; i++){
    if (pinakasPinakas [i] >0){
        sum=sum+pinakasPinakas[i];
    }
}
document.getElementById("summy").innerHTML="Sum: " +sum+ ".<br>"

var multi=1;
for (var i=0; i<pinakasPinakas.length; i++){
    if(pinakasPinakas[i] > 0){
    multi=multi*pinakasPinakas[i];
    }
 }

你遍历同一个数组两次，而且你使用的是相同的条件：
if (pinakasPinakas [i] >0)

看看下面的片段：

var pinakasPinakas = [2, 43, -21, 25, 34, -9, -50, 60, 12, -3];
var sum = 0;
var multi = 1;

for (var i = 0; i < pinakasPinakas.length; i++) {
  if (pinakasPinakas[i] > 0) {
    sum += pinakasPinakas[i];
    multi = multi * pinakasPinakas[i];
  }
}

document.getElementById("summy").innerHTML = "Sum: " + sum + ".<br>"
document.getElementById("multipl").innerHTML = "Multi: " + multi + ".<br>"


for (var i = 0; i < pinakasPinakas.length; i++) {
  if (pinakasPinakas[i] < 0) {
    document.getElementById("negative").innerHTML += pinakasPinakas[i] + ", ";
  } else {
    document.getElementById("positive").innerHTML += pinakasPinakas[i] + ", ";
  }
}
//

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 400px;
  background-color: rgb(108, 162, 231);
  border: 1px solid rgb(3, 24, 63);
}

li a {
  display: block;
  color: rgb(24, 12, 27);
  text-decoration: none;
  padding: 5px 11px;
}

li a:hover:not(.active) {
  background-color: rgb(64, 102, 151);
  color: rgb(15, 30, 37);
}

li {
  text-align: center;
  border-bottom: 2px solid rgb(6, 47, 100);
}

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: rgb(0, 82, 189);
  color: rgb(25, 15, 27);
}

h2 {
  color: rgb(10, 47, 116);
}

p {
  color: darkblue;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul>
    <li><a href="#page1.html" class="active">Page 1</a></li>
    <li><a href="page2.html"> Page 2</a></li>
  </ul>

  <h2>Πρόσθεση & Γινόμενο θετικών αριθμών</h2>

  <p id="summy"></p>
  <p id="multipl"></p>

  <h2>Εμφάνιση αρνητικών αριθμών</h2>

  <p id="negative">Negative: </p>
  <p id="positive">Positive: </p>

  <script src="Page1.js"></script>
</body>

</html>

Answer 3

首先，远离document.write。它很陈旧，现在除了在非常特殊的情况下几乎没有实际用途。 Wider discussion on this.

现在，您当前遇到的问题是您在 每次迭代 上覆盖 innerHTML 的值。这就是为什么您只看到最后一个负值的原因。

更好的方法是只分配给 innerHTML 一次，但将负值粘合在一起，作为一个连贯的字符串。

let negs_str = pinakasPinakas.filter(num => num < 0).join(',');
document.getElementById('negative').innerHTML = negs_str;

在那里，迭代是通过所有数组继承的原型 filter() 方法隐式为我们完成的。我们查看数组中的每个数字，只有小于 0 时才保留它，与您现有的逻辑相同。

Javascript(数组+document.getElementById)

Javascript(arrays+document.getElementById)

html

javascript

arrays

innerhtml

getelementbyid