Javascript Question posted in
A very good W3school tutorial can be found here.

Am new to javascript, i have this code where am trying to generate a random background color

Am new to JavaScript, I have this code where am trying to generate a random background color, which actually worked but the color title is not in alignment


   const color = ["red", "green", "yellow", "blue"];
let header = document.getElementById("header");
let container = document.getElementById("container");
function flip() {

    container.style.backgroundColor = color[getRandomColor()];

    header.textContent = color[getRandomColor()];

}

function getRandomColor() {
    for (let i = 0; i < color.length; i++) {
        return Math.floor(Math.random() * color.length);

    }

}

I have tried it without the for loop and nothing worked again

Tags:

4

Answers


  1. 0

    That’s the thing about generating a random number… It’s random. So it might not be the same number twice in a row.

    Every time you call getRandomColor() it returns a random number. (Not a random color, as its name suggests.) And you call it twice:

    container.style.backgroundColor = color[getRandomColor()];

header.textContent = color[getRandomColor()];

    Given the length of your array, there’s only a 25% chance that these two function calls will result in the same index being chosen in that array.

    If you just want one random number, call the function once and use the resulting value twice:

    const randomIndex = getRandomColor();

container.style.backgroundColor = color[randomIndex];

header.textContent = color[randomIndex];

    As an aside…

    I have tried it without the for loop and nothing worked again

    Your for loop isn’t doing anything meaningful, as you’ve guaranteed that it will only ever iterate once by returning from that iteration. You may as well remove it:

    function getRandomColor() {
  return Math.floor(Math.random() * color.length);
}
    Login or Signup to reply.
  2. 0

    first save the value of getRandomColor() into a variable then you can use the same value on both.

    const color = ["red", "green", "yellow", "blue"];
let header = document.getElementById("header");
let container = document.getElementById("container");

function getRandomColor() {
    for (let i = 0; i < color.length; i++) {
        return Math.floor(Math.random() * color.length);
    }
}

function flip() {
    let randomColor = getRandomColor();
    container.style.backgroundColor = color[randomColor];

    header.textContent = color[randomColor];

}
    Login or Signup to reply.
  3. 0 
    const generateBtn = document.querySelector("#generate");
const body = document.querySelector("body");
let red = 0;
let yellow = 0;
let blue = 0;
let mix = `rgb(${red}, ${yellow}, ${blue})`;

function generateColor() {
  red = Math.floor(Math.random() * 255);
  yellow = Math.floor(Math.random() * 255);
  blue = Math.floor(Math.random() * 255);
  mix = `rgb(${red}, ${yellow}, ${blue})`;
  body.style.background = mix;
}
generateColor();

generateBtn.onclick = (e) => {generateColor()};
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generate Random Color</title>
</head>

<body>
  <div>
    <button id='generate'>Generate</button>
    <a href="https://www.youtube.com/@Letz_build_it">Letz_build_it</a>
  </div>
</body>

</html>
    Login or Signup to reply.
  4. 0

    Define a variable and store the random index in that variable

    const color = ["red", "green", "yellow", "blue"];
let header = document.getElementById("header");
let container = document.getElementById("container");
function flip() {
    const randomColor = Math.floor(Math.random() * color.length);
    container.style.backgroundColor = color[randomColor];
    header.textContent = color[randomColor];
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search