Javascript（arrays + document.getElementById）

问题描述 投票：0回答：2

所以我在这里有这段代码：

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”中，该ID当然在我的HTML文件中。这很容易，我在上面做过参见。

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

//谢谢

javascript html arrays innerhtml getelementbyid
2个回答
0
投票

将每个元素附加到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>
-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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.