CODEWITHSUNDEEP
javascriptcsshtmlif-statement
Seamus W
Seamus W

Reputation: 95

Javascript changing stylesheets with if statements

Previous post was too long, so trying to shorten it up.. Basically having trouble with the function, at least that's what I think the problem is. The aim is for when the volume or slider is over 50, the color turns red, and when its under 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 feedback is appreciated, would be great to get this working by the end of the night. Please keep in mind that I'm very new to coding so the simpler the better.

Upvotes: 4

Views: 60

Answers (3)

Toni Leigh
Toni Leigh

Reputation: 4969

The best solution would be to define two classes in the css file that is included in the page. One css file is better than two.

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

Then use JavaScripts className to set the class based on the condition. You could use setAttribute("class", className) too. Add a single id to your colour changing target, I've used #colour-change-target in my example.

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

Upvotes: 0

Leo Farmer
Leo Farmer

Reputation: 7910

If you simply want to change the colour of the input you could just attach an event listener to your input and use this to change the style. As in the example below:

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

HTML (note you don't need to use the onchange trigger if you add an event listner)

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

Upvotes: 1

MFazio23
MFazio23

Reputation: 1312

Instead of swapping out the stylesheets, you should include both stylesheets in the page and swap out the class name of the input.

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

This is assuming your range input is assigned the ID value "range".

Upvotes: 0

Related Questions