How to link else if statements to CSS

Question

I made else if statements about shades of blue, and I want the background color to change to that shade of blue, then a particular hex number of blue shade is chosen by the JS. Albeit I don't know how to link JS and CSS together like CSS is linked to HTML, so I need help.

Answer 1

To change css styles in js is simple.
Do this.
elemToStyle.style.styleProp = "value";

For example,
document.querySelector("#elem").style.backgroundColor = "linear-gradient(red, blue)";

Note: The css property should be camelCased because hyphens can't be used in identifiers

Answer 2

Ore Adeleye so how I do implement it here https://code.sololearn.com/WNkWegYD5YsI/#js? and do I put it exactly as you said? And you said "#elem", but I don't know how to create things like classes, or ids like HTML for JS.

Answer 3

Ok, how do I remove undefined?

Answer 4

Danial Azadpour
See my solution https://code.sololearn.com/WN6u53THYxWy/?ref=app

Answer 5

Do something like this ,also you are returning same color ,also you didn't put that # before those color shades and finally to change color you need to add that color to some element like have added to body

window.onload=function(){
function shadeOfBlue(shade) {
if (shade == 1) {
return "#0000CC";
} else if (shade == 2) {
return "#0000CC";
} else if (shade == 3) {
return "#0000CC";
} else if (shade == 4) {
return "#0000CC";
} else {
return "Undefined";
}
}
var f=shadeOfBlue(1);
document.body.style.backgroundColor=f;

}