CODEWITHSUNDEEP
javascripthtmlcssif-statement
Seamus W
Seamus W

Reputation: 95

Using Javascript to change stylesheets with if statement?

I'm having trouble with my code.. Basically what I want is for when the volume slider is over halfway for it to turn red, and when its under halfway for it to turn green. I have the style sheets created I just don't know how to link it all together. Am I close? Thanks for feedback. (Focus: Last function and the Volume1 input)

<!DOCTYPE html>
<html>
<head>
<title>Audio Javascript Demo</title>

<link id="green" rel="stylesheet" type="text/css" title="Red" href="styleSheets/Red.css">
<link id="red" rel="alternate stylesheet" type="text/css" title="Green" href="styleSheets/Green.css">

<script>
var mediaClip; // shortcut for document.getElementById('mediaClip')

function init()
{
// initialise the mediaClip variable  
mediaClip = document.getElementById('mediaClip'); 

// get the length of the audio clip
document.getElementById('clipDuration').innerHTML = 'Length: ' + Math.floor(mediaClip.seekable.end(0) / 60) + ':' + twoDigits(Math.floor(mediaClip.seekable.end(0) % 60));

// updae the displayed data every 300 miliseconds
setInterval(updateDisplayedData,300);
}


function updateDisplayedData()
{
// update the current position
 document.getElementById('currentPosition').innerHTML = 'Current Position: ' + Math.floor(mediaClip.currentTime / 60) + ':' + twoDigits(Math.floor(mediaClip.currentTime % 60)) + "/4:02";

// update the current volume
if(mediaClip.muted)
{
   document.getElementById('currentVolume').innerHTML = 'Volume: MUTED';
}
else
{
  document.getElementById('currentVolume').innerHTML = 'Volume test: ' + Math.floor(mediaClip.currentTime *100  / 243);
}
{

}
}


function playClip()
{
document.getElementById('mediaClip').play();  
}


function pauseMusic()
{
document.getElementById('mediaClip').pause();  
}


function stopClip()
{ 
// There is no stop function.
// Instead, we pause and set the currentTime to 0
document.getElementById('mediaClip').pause();  
document.getElementById('mediaClip').currentTime = 0;
}


function decreaseVolume()
{
// minimum volume is 0  
if(mediaClip.volume > 0)
{
 mediaClip.volume -= 0.01;     
} 
}


function increaseVolume()
{
// maximum volume is 1
if(mediaClip.volume < 1)
{
 mediaClip.volume += 0.01;
}
}


function toggleMute()
{
if(mediaClip.muted)
{
   mediaClip.muted = false;
}
else
{
  mediaClip.muted = true;     
}
}


function toggleControls()
{
if(mediaClip.controls)
{
  mediaClip.controls = false;
}
else
{
  mediaClip.controls = true;     
}
}


function Goto15Secs()
{
mediaClip.currentTime = 15;
}


function twoDigits(number) 
{
if (number < 10) 
{ 
 number = ("0" + number).slice(-2); 
}
return number;
}

function playPause() {
    var mediaClip = document.getElementById("mediaClip");
    if (mediaClip.paused) {
        mediaClip.play();   
    } else {
        mediaClip.pause();
    }
}

function change() {
    var button1 = document.getElementById("button1");
    if (button1.value==="Play") button1.value = "Pause";
    else button1.value = "Play";
}

function setVolume() {
    var mediaClip = document.getElementById("mediaClip");
    mediaClip.volume = document.getElementById("volume1").value;

}

function setTime() {
   var mediaClip = document.getElementById("mediaClip");
   mediaClip.currentTime = document.getElementById("time1").value;
}

function backStart() {
    document.getElementById("mediaClip").currentTime = 0;
}

function upVolume() {
    if (mediaClip.volume < 1)
    {
        mediaClip.volume += 0.1;
    }

}

function downVolume() {
    if (mediaClip.volume > 0)
    {
        mediaClip.volume -= 0.1;
    }
}

function gotoChorus() {
    document.getElementById("mediaClip").currentTime = 55; 
}

function changeColor(sheet) {
    if (document.getElementById("volume1").value > 0.5){
      document.getElementById("Red").setAttribute('href', sheet);
  }
  else{
      document.getElementById("Green").setAttribute('href', sheet);
  }
}

</script>

</head>

<body onload = 'init()'>

<audio id = 'mediaClip' controls src = 'take_me_to_church_hozier.mp3'>  
<p>Your browser does not support the 'audio' tag </p>
</audio>

<br>
<button onclick = 'playClip()'>Play</button>
<button onclick = 'pauseMusic()'>Pause</button>
<button onclick = 'stopClip()'>Stop</button>
<br>
<button onclick = 'decreaseVolume()'>Decrease Volume</button>
<button onclick = 'increaseVolume()'>Increase Volume</button>
<button onclick = 'toggleMute()'>Toggle Mute</button>
<br>
<button onclick = 'toggleControls()'>Toggle Controls</button>
 <br>
<button onclick = 'Goto15Secs()'>Goto 15 Seconds</button>
<br/>
<br/>
<input onclick="change();playPause()" type="button" value="Play" id="button1">
<input type="range" onchange="setVolume();changeColor('styleSheets/Green.css')" id='volume1' min=0 max=1 step=0.01 value='1'/>
<br/>
<button onclick ="backStart()">Reset</button>
<input type="range" onchange="setTime()" id="time1" min="0" max="242" step="2.42" value="0"/>
<br/> 
<button onclick="upVolume()">Volume up 10%</button>
<button onclick="downVolume()">Volume down 10%</button>
<br/>
<button onclick="gotoChorus()">Go to chorus</button>

<div>
<p id='clipDuration'></p>
<p id='currentPosition'></p>
<p id='currentVolume'></p>
</div>

</body>
</html>

Upvotes: 1

Views: 193

Answers (3)

Alvin Pascoe
Alvin Pascoe

Reputation: 1209

Given your code, I would:

1) Remove (or <!-- Comment out -->) which ever CSS stylesheet is NOT default (so leave only the default that will be present when the page loads). Remove the <link> element belonging to that stylesheet.

2) Rename the remaining <link> element's id from either red or green to styles

3) Update your function as follows:

function changeColor() { 
  if (document.getElementById("volume1").value > 0.5){ 
    document.getElementById("styles").setAttribute('href', "styleSheets/Red.css"); 
  } else { 
    document.getElementById("styles").setAttribute('href', "styleSheets/Green.css"); 
  }
}

However...

This is not the best way to update styles on a page.

A better way would be to still uses your red and green css styles, but instead of having two stylesheets, they can go in the main stylesheet (or maybe a separate themes stylesheet). The main thing you'd need to do is update your styles so all rules in the red stylesheet begins with .red...so for example:

.red button{...

.red input{...

.red p{...

and so on, and you'd do the same for green.

After this, to change the styles, all you'd do is update the class of one of the parent elements on the page (even the <body> element though I wouldn't recommend this).

To update a class using JavaScript, you can use:

document.getElementById("container").classList.add('red');
document.getElementById("container").classList.remove('green');

Upvotes: 1

Script47
Script47

Reputation: 14539

I wouldn't have a full stylesheet to change one thing but you can use the below function:

function changeStyleSheet(styleSheetName){
    document.getElementById("styles").setAttribute("href", styleSheetName);
}

You'd give your CSS include an ID of styles:

<link type="text/css" rel="stylesheet" id="styles" href="styleSheets/Red.css">

Then you'd do:

changeStyleSheet("styleSheets/Green.css")

The if statement would be something like: 

// Random number used, assuming 100 is the maximum value.
if (mySlider == 50) {
    changeStyleSheet("newStyleSheet");
} else {
    changeStyleSheet("newStyleSheet");
}

You might want to add an event listener (onchange?) to your slider then run the check each time.

Upvotes: 0

alcfeoh
alcfeoh

Reputation: 2257

Change the CSS class, not the stylesheet. What I would do is have a "red" CSS class and a "green" one and then do something like this:

document.getElementById("MyElement").className = "red";

Upvotes: 0

Related Questions