CODEWITHSUNDEEP
javascripthtmlarrays
Harvey
Harvey

Reputation: 1408

Random color from array JavaScript

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

Upvotes: 0

Views: 3273

Answers (2)

Rahul Dubey
Rahul Dubey

Reputation: 11

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>

Upvotes: 1

dersvenhesse
dersvenhesse

Reputation: 6404

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>

Upvotes: 5

Related Questions