Need to understand how for loop is working in the The Color Flipper code below-CodePudding

Code : 

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");

btn.addEventListener("click", function () {
  let hexColor = "#";
  for (let i = 0; i < 6; i  ) {
    hexColor  = hex[getRandomNumber()];
    console.log(hexColor);
    color.textContent = hexColor;
    document.body.style.backgroundColor = hexColor;
  }
});

function getRandomNumber() {
  return Math.floor(Math.random() * hex.length);
}

Here i am unable to understand how for loop is running. How for loop is establishing connection with getRandomNumber() function. Could someone please explain how for loop is operating in regards to this code step by step please?

Thank You

CodePudding user response：

getRandomNumberFunction returns a random value from the hex variable as you can see here

function getRandomNumber() {
  return Math.floor(Math.random() * hex.length); // this returns a random number based on the length of the hex which is 16 it will choose from 0-15
}

then append the value taken to the variable hexColor which is initially assigned with "#"

   hexColor  = hex[getRandomNumber()]; // initial value "#"   "hex[0-15] random digit"

At the end of the code it will look something like this hex code #32a856 because it will only run for 6 turns then that will be set to the background color of body element

CodePudding user response：

What happens in getRandomNumber() is whenever the function is called, it generates a random number between 0-15 (which is the length of the array hex[])

More information about JavaScript Math here

For how it is used inside the for loop:

`for (let i = 0; i < 6; i  )`

let i = 0 We initially defined the variable i with 0 as its value.
i < 6 This is the condition of the loop. This means when this condition is true, the code inside the loop will re-run until it becomes false.
i This is like the 'do' part of the loop. So whenever the condition is met, this is the action that will be done to the variable we initially defined. In this case, the value i gets incremented ( )/i=i 1.
When the loop happens, hexColor gets concatenated with a random value from the array hex[]
```
`hexColor  = hex[getRandomNumber()];`
```

For instance:

If function getRandomNumber() output is = 11. Then, hex[getRandomNumber()] output is = hex[11]. In which hex[1] = "B". Therefore hexColor becomes #B - This gets repeated six (6) times until the 6 characters are completed. Sample output
Loop 1: #B
Loop 2: #B3 ... so on

However in the code you provided, the lines:

color.textContent = hexColor;
document.body.style.backgroundColor = hexColor;

is inside the for loop. Which means color.textContent and document.body.style.backgroundColor is being set 6 times. Which should be not and it should just be set whenever the loop is completed.

Here is a code sample where I moved

color.textContent = hexColor;
document.body.style.backgroundColor = hexColor;

outside the loop so it would just change color.textContent and document.body.style.backgroundColor once the hexColor/loop is completed.

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
        const btn = document.getElementById("btn");
        
        btn.addEventListener("click", function () {
          let hexColor = "#";
          for (let i = 0; i < 6; i  ) {
            hexColor  = hex[getRandomNumber()];
          }
          document.getElementById('color').innerHTML = hexColor;
          document.body.style.backgroundColor = hexColor;
        });
        
        function getRandomNumber() {
          return Math.floor(Math.random() * hex.length);
        }

<html>
  <body>
    <p style="font-size:48px">Color (hexColor) value: <span id="color"></span> </p>
    <button id="btn" style="padding: 20px;">Get Random Color</button> 
  </body>
</html>

Hope this helps!

CodePudding user response：

There are many details answers here, however, since your question is about the for loop.

The following means it will call the getRandomNumber() 6 times, so it will place random chars from your hex array, forming a 6 char long string (e.g. #847ABC)

let stringToBeCreated = '';
for (let i = 0; i < 6; i  ) {
   console.log('value of i', i);
   stringToBeCreated  = i; // this is replaced by your randomNumber and hex array
}

console.log('string created', stringToBeCreated)