Search code examples
javascripthtmlarraysinnerhtmlgetelementbyid

Javascript(arrays+document.getElementById)

So guys i have this code here:

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>

My "project" is to multiply and add the positive numbers in the array and put each one of them in an "ID", which is of course in my HTML file. So that's easy and I did that above as u see.

So, what's the issue? After that, I should also display the negative values just like that: in another <p id="negative"> in the html file. (-21,-9,-50,-3). When I use the getElementById method with my innerHTML nothing appears, but sometimes when I modify that a little the last negative value is displayed (only -3). When I comment it and uncomment the document.write() method all negatives numbers are displayed. Why do I face such a problem with the first method? And how can i fix my code and finally use getElementById?

// thanks

Solution

  • First of all, stay away from document.write. It's archaic, and has almost no practical use these days except in very special situations. Wider discussion on this.

    Now, the problem you've got currently is you're overwriting the value of innerHTML on each iteration. This is why you see only the last negative value.

    Better would be to assign to innerHTML just once, but with the glued-together negative values, as a coherant string.

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

    There, iteration is done implicitly for us by prototypal filter() method inherited by all arrays. We look at each number in the array, and keep it only if it's below 0, same as your existing logic.