Changing the background color using javascript

Question

I just want the background color to be changed when the bottom is clicked using javascript.And also want to display the hex Value of the corresponding color.It should be a random selection from the code.

I actually created array of hexadecimal characters and created a function to generate the hexadecimal values.But i am unable to display the code to the screen.


var color=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];

function getRandNumber(min,max){
 return Math.floor(Math.random()*(max-min+1))+min;
}

var button = document.querySelector(".color");

button.addEventListener("click",()=>{
 document.body.style.backgroundColor = "#" 
                                     + color[getRandNumber(0,15)]
                                     + color[getRandNumber(0,15)]
                                     + color[getRandNumber(0,15)]
                                     + color[getRandNumber(0,15)]
                                     + color[getRandNumber(0,15)]
                                     + color[getRandNumber(0,15)]
                                     
 console.log(document.body.style.backgroundColor);

 document.querySelector(".colorName").innerHTML = document.body.style.backgroundColor
})

The result of console logging is in the rgb() form.Is there any way to get it in hex form.I just want to output the hex value of the background color.

Does this answer your question? How to get hex color value rather than RGB value? — Pete
– Pete, Commented Aug 17, 2020 at 12:19
If you are creating a hex colour, why not just assign it to a var and re-use it instead of assigning it to the body and then converting the rgba of the body back to it — Pete
– Pete, Commented Aug 17, 2020 at 12:22

Mister Jojo · Accepted Answer · 2020-08-17 12:31:17Z

2

my way..

const a256val =()=>Math.floor(Math.random()*256)
const getHex = v =>('0'+v.toString(16)).slice(-2).toUpperCase()

function newBgColor()
  {
  let r = a256val(), g=a256val(), b=a256val()
  document.body.style.backgroundColor = `rgb(${r},${g},${b})`
  console.log(`#${getHex(r)}${getHex(g)}${getHex(b)}` )
  }

newBgColor()

Or (more "direct")

//const aRGB=()=> '#'+('0'.repeat(5)+Math.floor(Math.random()*(Math.pow(256, 3)))).toUpperCase().slice(-6)
const aRGB=()=>'#'+(Math.floor(Math.random()*0x1000000)).toString(16).toUpperCase().padStart(6,'0')

function newBgColor()
  {
  let rgb = aRGB()
  document.body.style.backgroundColor = rgb
  console.log( rgb )
  }

edited Aug 17, 2020 at 12:31

answered Aug 17, 2020 at 11:57

Mister Jojo

22.9k6 gold badges27 silver badges45 bronze badges

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

1 Comment

Yevhen Horbunkov Over a year ago

'..more "direct"' and still it is not even close as direct, as @ThaFog 's answer (second part of it), so I wouldn't try to make it more compact, since OP, obviously, values verbosity over efficiency, otherwise you would end up with something, like (0|Math.random()*(0xffffff+1)).toString(16).padStart(6,'0')

ThaFog · Accepted Answer · 2020-08-17 11:51:15Z

toString() method takes radix as first argument so you can use it to transform number into hexadecimal representation. You'd like to use also padStart() to always have possible leading zeros if generated random is less than 0x10:

getRandNumber(0, 0xff).toString(16).padStart(2, 0) + 
getRandNumber(0, 0xff).toString(16).padStart(2, 0) + 
getRandNumber(0, 0xff).toString(16).padStart(2, 0);

or just with generating whole hex with one shot:

getRandNumber(0, 0xffffff).toString(16).padStart(6, 0)

Collectives™ on Stack Overflow

Changing the background color using javascript

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related