const box = document.getElementsByClassName('box');
let colorAsString = '#FEC6F0';
let colorAsNumber = #FEC6F0;
Array.from(box).forEach((element) =>{
element.style.backgroundColor = colorAsString;
element.style.backgroundColor = colorAsNumber;
});
I stored a hex-color value in string as well as a number and pass the variable as a value for css property. Why this code not work can you explain me...!
When you edit the style property, it is in the end only a CSS string. So to represent colors you can use formats like: '#ffffff' or 'rgb(255,255,255)'. But you cannot use a number.
You can read more about that here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
const box = document.getElementsByClassName('box');
let colorAsString = '#FEC6F0';
Array.from(box).forEach((element) =>{
element.style.backgroundColor = colorAsString;
});.box {
width:100px;
height:100px;
margin:10px;
background-color:gray;
}<div class="box"></div>
<div class="box"></div>
<div class="box"></div>It's working
<html>
<body>
<p id="p">
on click change my color
</p>
<script>
onclick = function(){
document.getElementById("p").style.color = "#fff";
document.getElementById("p").style.background = "#000";
}
</script>
</body>
</html>