Replacing an element in an array with a for loop javascript not properly replacing element

Question

I have a function here that replaces the elements that are multiples of 3 & 5 with "Fizz" and "Buzz" respectively. I ran the function and it only replaces the 1st element with "Fizz", and nothing else. I'm not sure why it only replaces the 1st element, since it doesn't match any of the if else statements that I have. I don't believe that I need to have the array within the function, do I, since it would mean that the array was being created while I was attempting to replace the elements.

var listOfNumbers = new Array(100);

var i, j;
for (i = 0; i < listOfNumbers.length; i++){
    listOfNumbers[i] = i + 1;
}

function fizzBuzz(listOfNumbers){                
    for (j = 0; j < listOfNumbers.length; j++) {
        if (j % 3 == 0 && j % 5 == 0){
            listOfNumbers[j] = "FizzBuzz";
        }
        else if (j % 3 == 0) {
            listOfNumbers[j] = "Fizz";
        }
        else if (j % 5 == 0) {
            listOfNumbers[j] = "Buzz";
        }
        else {
            listOfNumbers[j] = j;
        }
        return listOfNumbers;
    }
    document.getElementById("Nums").innerHTML = fizzBuzz();
}

Array in the console.

I'm not sure

Also, I have a button to display the array, but it doesn't seem to display the array when clicking on it.

<h4>Fizz Buzz</h4>
<p>An idea that prints the elements of an array from 1 to 100, but it prints "Fizz" for every multiple of 3, "Buzz" for ever multiple of 5, and finally "FizzBuzz" for every multple of 15.
    Idea taken from <a href="https://github.com/karan/Projects#text">here</a>.</p>
    <button type="button" onclick="fizzBuzz()">Click to see the results</button>
    <p id="Nums"></p>

you are returning inside the for loop, thus it exits after the first iteration, and doesn't apply to the entire array. — George
– George, Commented Mar 11, 2018 at 17:39
Isn't the classic FizzBuzz supposed to replace multiples of 15 with "FizzBuzz"? — Igor
– Igor, Commented Mar 11, 2018 at 17:47
maybe you check why you change the value of the array with this line listOfNumbers[j] = j; it makes an assumption which is not clear, because you have already values in it, but you change it later to a different value. — Nina Scholz
– Nina Scholz, Commented Mar 11, 2018 at 17:53

Nina Scholz · Accepted Answer · 2018-03-11 18:15:14Z

2

You need

to hand over the array,
to check the value of the array, not the index, because it is shifted by one,
to check for FizzBuzz first, to get number who are divisable by 3 and 5,
to return the array at the end,
additionally declare a local variable j.

function getFizzBuzz() {
    var listOfNumbers = new Array(100),
        i;

    for (i = 0; i < listOfNumbers.length; i++) {
        listOfNumbers[i] = i + 1;
    }
    document.getElementById("Nums").innerHTML = fizzBuzz(listOfNumbers);
}

function fizzBuzz(array) {
    var j;

    for (j = 0; j < array.length; j++) {
        if (array[j] % 3 == 0 && array[j] % 5 == 0) {
            array[j] = "FizzBuzz";
        } else if (array[j] % 3 == 0) {
            array[j] = "Fizz";
        } else if (array[j] % 5 == 0) {
            array[j] = "Buzz";
        }
    }
    return array;
}

<button onclick="getFizzBuzz()">FizzBuzz!!!</button><br><div id="Nums"></div>

edited Mar 11, 2018 at 18:15

answered Mar 11, 2018 at 17:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Asking Over a year ago

This worked for me, but I still cannot get it to show up on the webpage.

Nina Scholz Over a year ago

which part does not work? have you tried to get the result in the console?

Asking Over a year ago

No, the function worked and all, and it replaced the right values, but I have a button that uses the function to display it onto webpage. I edited my original post with the html code.

Nina Scholz Over a year ago

you need another function to wrap the cration of the array, call fizzBuzz and assign the value to the output.

Asking Over a year ago

That worked. I need to fix the formatting, but I can do that later.

George · Accepted Answer · 2018-03-11 17:43:14Z

2

The return statement is inside the for loop which is why it is returning on the first iteration. check the below code for clarification :

var listOfNumbers = new Array(100);

var i, j;
    for (i = 0; i < listOfNumbers.length; i++){
        listOfNumbers[i] = i + 1;
    }

function fizzBuzz(listOfNumbers){

for (j = 0; j < listOfNumbers.length; j++){
        if (j % 3 == 0){
            listOfNumbers[j] = "Fizz";
        }
        else if (j % 5 == 0){
            listOfNumbers[j] = "Buzz";
        }
        else{
            listOfNumbers[j] = j;
        } 
       
    }
  return listOfNumbers;
}
console.log(fizzBuzz(listOfNumbers));

edited Mar 11, 2018 at 17:43

George

2,4203 gold badges18 silver badges39 bronze badges

answered Mar 11, 2018 at 17:38

Prashanth KR

2942 silver badges8 bronze badges

Comments

guijob · Accepted Answer · 2018-03-11 17:40:17Z

0

You could use a map approach:

function fizzBuzz(listOfNumbers) {
    return listOfNumbers.map(x => {
        if(x % 3 == 0) x = 'Fizz';
        else if(x % 5 == 0) x = 'Buzz';
        return x;
    });
}

answered Mar 11, 2018 at 17:40

guijob

4,4883 gold badges23 silver badges41 bronze badges

Comments

Ryan · Accepted Answer · 2018-03-11 18:40:55Z

How a programming master do Fizz Buzz in JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Fizz Buzz</title>
</head>
<style type="text/css">

ol {
    width: 500px;
    line-height: 1.5em;

}
</style>
<body>
<h1>Fizz Buzz</h1>

<ol id="Nums">
</ol>
<script type="text/javascript">
var listOfNumbers = new Array(100);


function fizzBuzz(listOfNumbers){

for (j = 0; j < listOfNumbers.length; j++){
        if ((j + 1) % 3 == 0 && (j + 1) % 5 == 0){
            listOfNumbers[j] = "FizzBuzz";
        }
        else if ((j + 1) % 3 == 0){
            listOfNumbers[j] = "Fizz";
        }
        else if ((j + 1) % 5 == 0){
            listOfNumbers[j] = "Buzz";
        }
        else{
            listOfNumbers[j] = j + 1;
        } 

    }
  return listOfNumbers;
}

function printer(list){
    fizzBuzz(listOfNumbers);
    for (var i = 0; i < 100; i++){
        var item = document.createElement("li");
        var text = document.createTextNode(listOfNumbers[i]);
        item.appendChild(text);
        var list = document.getElementById("Nums");
        list.appendChild(item);
    }
}
printer();
</script>
</body>
</html>

Collectives™ on Stack Overflow

Replacing an element in an array with a for loop javascript not properly replacing element

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related