CODEWITHSUNDEEP
javascriptjquerycss
user4244510
user4244510

Reputation: 79

Change color for the class using different css files

I am trying to have one of the classes in my game change color so I used a different css files for each color. The stylesheets are in a folder called stylesheets. I used the script below to make it simple and short and be useable for all colors but it the color doesn't change. I believe the problem is with the href link. Is there a problem with my script?

jQuery:

<script type="text/javascript">
function updateColor(filename) {
        $('head').children(":last").append('<link rel="stylesheet" href="stylesheets/" + filename + ".css" />');
}
</script>

HTML:

<select>
  <option href="javascript:updateColor('blue')">Blue</option>
  <option href="javascript:updateColor('black')">Black</option>
  <option href="javascript:updateColor('gray')">Gray</option>
  <option href="javascript:updateColor('green')">Green(Default)</option>
  <option href="javascript:updateColor('pink')">Pink</option>
  <option href="javascript:updateColor('yellow')">Yellow</option>
</select>

Upvotes: 1

Views: 181

Answers (3)

EternalHour
EternalHour

Reputation: 8621

As pointed out, your concatenation is slightly wrong. You also need some type of event to your JQuery such as change, or click. It may be a problem with the relative path within your href path. Based on what you have now, the stylesheets directory would need to be in the same directory as your HTML file.

One approach is to create a new stylesheet link for every selection which may work better because then there is no traversing within head.

HTML:

<select id="color">
    <option value="blue">Blue</option>
    <option value="black">Black</option>
    <option value="gray">Gray</option>
    <option value="green">Green(Default)</option>
    <option value="pink">Pink</option>
    <option value="yellow">Yellow</option>
</select>

JS:

$('#color').on('change', function (e) {
    var selected = $("option:selected", this);
    var color = this.value;
    $('head').append
     ('<link rel="stylesheet" href="stylesheets/' + color + '.css" />');
});

I believe there is a big issue with this whole approach though, once user leaves the page (or refreshes) your link will disappear unless you use LocalStorage (HTML5 only) or cookies. Might be OK in your situation though. I would highly recommend using PHP for this if possible which IMO is more manageable in this situation.

Upvotes: 0

rdubya
rdubya

Reputation: 2916

The easiest way to do this is to output a link tag in the head that has your default stylesheet in it. It looks like that is green from your example.

<link rel="stylesheet" id="color-changer" href="stylesheets/green.css">

Then change your select to be:

<select>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
  <option value="gray">Gray</option>
  <option value="green" selected>Green(Default)</option>
  <option value="pink">Pink</option>
  <option value="yellow">Yellow</option>
</select>

Then your js becomes:

$(function(){
    $('select').change(function() {
        $('#color-changer').attr('href','stylesheets/' + $(this).val() + '.css') ;
    });
});

If you would like to stick with the approach of appending new stylesheets, you can use the following js:

$(function(){
    $('select').change(function() {
        $('head').append('<link rel="stylesheet" href="stylesheets/' + $(this).val() + '.css" />') ;
    });
});

Upvotes: 1

Taylor
Taylor

Reputation: 773

href="stylesheets/' + filename + '.css"

should work because you started making the append with a ' and so the " didn't stop it

Upvotes: 0

Related Questions