CODEWITHSUNDEEP
javascripthtml
Paul B Fitzsimons
Paul B Fitzsimons

Reputation: 85

Multiple commas Javascript when printing an array

This is probably really basic but I keep getting strange output when printing an array, it keeps putting double commas in between values in the arrays. I know it's something simple but I've been at this for a couple of hours now and no joy. You can see at the end I've tried a couple of things but end up with a weird double comma.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to run the digit checker.</p> <!--Text telling the user to hit the button-->

<button onclick="myDigitChecker()" >Submit</button> <!--button that runs my function once they hit-->

<p id="demo"></p>
<p id="demo2"></p>

<script>
function myDigitChecker() {
    var input = prompt("Please enter two positive digits, decimals will be rounded");
    var digits = Math.round(input); //take the inoput and convert it to a whole number

    var evenNumbers = [];
    var oddNumbers = [];


    while (isNaN(digits)|| digits < 10 || digits >99) {//isNaN is a method for checking if something isn't a number
    var digits = prompt("Please enter two positive digits, decimals will be rounded")}

    for (x = 0; x <= digits ;x++){
        if(x % 2 === 0){
            evenNumbers[x] = x;
            console.log(evenNumbers);
        }else{
            oddNumbers[x] = x;
            console.log(oddNumbers);
        }
    }

    document.getElementById("demo").innerHTML = (evenNumbers.join(","));
    var str1 = oddNumbers.toString;
    document.getElementById("demo2").innerHTML = oddNumbers;

}
</script>

</body>
</html>

Upvotes: 2

Views: 677

Answers (2)

Nina Scholz
Nina Scholz

Reputation: 386883

You create a sparse array with holes by using indices which are not consecutive.

Just replace

evenNumbers[x] = x;
// or
oddNumbers[x] = x;

with 

evenNumbers.push(x);
// or
oddNumbers.push(x);

By usingArray#push, you avoid holes, because every element is filled with a value.

function myDigitChecker() {
    var input = prompt("Please enter two positive digits, decimals will be rounded"),
        digits = Math.round(input), //take the inoput and convert it to a whole number
        evenNumbers = [],
        oddNumbers = [],
        x;

    while (isNaN(digits) || digits < 10 || digits > 99) { //isNaN is a method for checking if something isn't a number
        digits = prompt("Please enter two positive digits, decimals will be rounded");
    }
    
    for (var x = 0; x <= digits; x++) {
        if (x % 2 === 0) {
            evenNumbers.push(x);
        } else {
            oddNumbers.push(x);
        }
    }

    document.getElementById("demo").innerHTML = evenNumbers.join(",");
    document.getElementById("demo2").innerHTML = oddNumbers.join(",");
}
<p>Click the button to run the digit checker.</p>
<!--Text telling the user to hit the button-->

<button onclick="myDigitChecker()">Submit</button>
<!--button that runs my function once they hit-->

<p id="demo"></p>
<p id="demo2"></p>

Upvotes: 3

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11011

Remove the empty values in arrays, replace evenNumbers.join(",") with evenNumbers.filter(x => Number.isInteger(x).join(",").

document.getElementById("demo").innerHTML = evenNumbers.filter(x =>  Number.isInteger(x).join(",");
document.getElementById("demo2").innerHTML = oddNumbers.filter(x =>  Number.isInteger(x).join(",");

Upvotes: 0

Related Questions