Javascript changes stylesheets with if statements

Question

The previous message was too long, so I tried to shorten it. Basically there are problems with the function, at least what I think of the problem. The goal is when the volume or slider exceeds 50, the color turns red, and when it is less than 50, it turns green.

JavaScript:

    function changeColor(sheet) {
    document.getElementById("Green").setAttribute('href', sheet);
    document.getElementById("Red").setAttribute('href', sheet);

    if (mediaClip.volume < 0.5)
    {
      changeColor("styleSheets/Green.css");
    }
  else
    {
      changeColor("styleSheets/Red.css");
    }

Html:

<input type="range" onchange="setVolume();changeColor()" id='volume1' min=0 max=1 step=0.01 value='1'/>

All reviews are welcome, it would be great if it worked by the end of the night. Please keep in mind that I am very new to coding, the simpler the better.

Answer 1

, , .

function changeColor() {
    document.getElementById('range').className = mediaClip.volume < 0.5 ? green : red;
}

, "" ID.

Answer 2

, . :

window.onload = function(){
    document.getElementById("volume1").addEventListener("change", function(){
        if (mediaClip.volume < 0.5){
            this.style.backgroundColor = 'green';
        }else{
            this.style.backgroundColor = 'red';
        }
    });
}

HTML ( , onchange, )

<input type="range" id='volume1' min=0 max=1 step=0.01 value='1'/>

Answer 3

css, . css , .

.red {
    background-color: red;
}
.green {
    background-color: green;
}

JavaScripts className, . setAttribute("class", className) . id , #colour-change-target .

if (mediaClip.volume < 0.5) {
    document.getElementById('#colour-change-target').className = 'red';
} else {
    document.getElementById('#colour-change-target').className = 'green';
}