Random color from array JavaScript

Question

I am new to javascript so sorry in advance for the simplicity of this question.

On load of the web page I would like my div to be a random colour denoted in my array.

HTML

 body onload="start"()"

JS

var color = ["red", "blue", "yellow", "green"];

function start() {

    document.getElementById("sq").style.backgroundColor =     color[Math.floor(Math.random() * color.length)];
}

My apologies, I cannot get the random color set to the div. I tried to set a color directly i.e. blue. and that worked. but using the array does not at all.

So finally, I would like my div to be a random color out of my array every time I start the web page

And what's the question exactly ?

Denys Séguret
– Denys Séguret

2015-05-04 14:52:57 +00:00
Commented May 4, 2015 at 14:52 — Denys Séguret
– Denys Séguret, Commented May 4, 2015 at 14:52

dersvenhesse · Accepted Answer · 2015-05-04 15:05:07Z

5

Your code already works. You just messed up some quotes. The correct HTML for your JS would look like that:

<body onload="start()">
    <div id="sq"></div>
</body>

A more superior way is to call addEventListener in JavaScript itself on the Event DOMContentLoaded (here are more informations). In that case HTML and JS are properly separated.

var color = ["red", "blue", "yellow", "green"];

// dom ready
document.addEventListener("DOMContentLoaded", function (event) {
    start()
});

function start() {
    document.getElementById("sq").style.backgroundColor = color[Math.floor(Math.random() * color.length)];
}

#sq {
    margin: 5px;
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

<div id="sq"></div>

edited May 4, 2015 at 15:05

answered May 4, 2015 at 14:59

dersvenhesse

6,4742 gold badges34 silver badges55 bronze badges

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

Comments

leonheess · Accepted Answer · 2020-01-27 13:57:16Z

This code is to change the background color of the body randomly

//get the values form the html page in a const variables
const colorBtn = document.querySelector(".colorBtn");
const bodyBcg = document.querySelector("body");
const hex = document.querySelector(".hex");

//create an array of hex litearls
const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

//create an event listener linked button   
colorBtn.addEventListener("click", changeColor);

function changeColor() {
  //variables to stores hexvalue of the color
  let hexCol = "#";

  //Run for loop upto 6 times has hex value is of six literal long
  for (let i = 0; i < 6; i++) {
    //generates an random index less then 15
    let random = Math.floor(Math.random() * hexNumbers.length);
    //add all values to a variable
    hexCol += hexNumbers[random];
  }
  //change the color of the body background according to value we created
  bodyBcg.style.backgroundColor = hexCol;
  //shows the hex value which we get
  hex.innerHTML = hexCol;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.colorBtn {
  user-select: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid #fefefe;
  border-radius: 7px;
  color: #fefefe;
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 1.5rem;
  text-transform: capitalize;
  cursor: pointer;
  outline: none;
}

.colorBtn:hover {
  background-color: rgb(0, 0, 0);
}

.container {
  text-align: center;
}

.hexColor {
  text-transform: capitalize;
}

.hex {
  font-size: 3rem;
  display: block;
}

<div class="container">
  <h2 class="hexColor">This Color Code is : <span class="hex"></span></h2>
  <button type="button" class="colorBtn">
            Press Me To Change The Color
          </button>
  <script src="script.js"></script>
</div>

please add some explanation about your solution and way to approach the answer for increased readability and usability.

Collectives™ on Stack Overflow

Random color from array JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related