Javascript（数组+document.getElementById）答案

【问题标题】：Javascript(arrays+document.getElementById)Javascript（数组+document.getElementById）
【发布时间】：2019-12-11 11:21:52
【问题描述】：

所以伙计们，我这里有这个代码：

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>

我的“项目”是将数组中的正数相乘和相加，并将它们中的每一个放在一个“ID”中，这当然是在我的 HTML 文件中。所以这很容易，我在上面做了你见。

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

// 谢谢

【问题讨论】：

而不是innerHTML=(pinakasPinakas[i]); 做innerHTML+=(pinakasPinakas[i]); 您正在将最后一个值分配给innerHTML。相反，您将不得不连接该值。另一种方法是使用功能方法。将数组拆分为 +ve 和 -ve 值数组。这将减少不必要的迭代和检查。然后做.innerHTML = negativeValues.join()

标签： javascript html arrays innerhtml getelementbyid

【解决方案1】：

首先，远离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 时才保留它，与您现有的逻辑相同。

【讨论】：

这对我来说似乎有点困难，因为我刚开始写代码:(
嗯，当然，这就是我们在这里的原因。问有什么不清楚的。不过，这并没有改变我已经解决了你的问题的事实:)
是的，我知道！！非常感谢！我有理论背景，但有些事情对我来说似乎很难。

【解决方案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)

看看下面的sn-p：

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>

【讨论】：

谢谢朋友，你帮了我很多！
Np，随时！ :)

【解决方案3】：

只需添加一个加号运算符来追加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>

【讨论】：

这是一个排版问题，只需发表评论即可。回答此类问题是一种不好的做法
@Rajesh 我不认为这是一个错字。他可能不知道如何将值附加到 DOM。