Trying to pass Color Hex as parameters in JavaScript

Question

Hello So I am currently having some difficulty in working on a Site, I would like to have 10 preset color schemes and swap them with the click of an icon, rather than writing the function 10X I would rather do it once and each Icon with a link would simply send the parameters what I'm trying isnt working though, any indication as to what I'm doing wrong would be appreciated

The call to the function

<button type="button" onclick="themeOne(#D3649F,#000000,#666666)">Theme 1</button>

And now for the Function

function themeOne(p1,p2,p3) {

    var links = document.getElementById('slidebar').getElementsByTagName('a');

    for (var i = 0; i < links.length; i++) {
        links[i].style.color = p1;
    }


    var glyph = document.querySelectorAll(".blue");

    for (var i = 0; i < glyph.length; i++) {
        glyph[i].style.color = p1;
    }

    document.body.style.backgroundColor = p3;
    document.getElementById("navbar").style.backgroundColor = p2;
    document.getElementById("navbar2").style.backgroundColor = p2;
    document.getElementById("slidebar").style.backgroundColor = p2;
    document.getElementById("page-content").style.color = "#FFFFFF";
}

My concern is with what I am passing to the Variable as Im not sure if the "#' is considered an int or if I need to do something like just sending the numerical digits and follow up with something like:

document.body.style.backgroundColor = "#" + p3;

Answer 1

You should pass the parameters as strings. this would result in changing the following:

<button type="button" onclick="themeOne('#D3649F', '#000000','#666666')">Theme 1</button>

Answer 2

Open your console and enter 0xD3649F in it. You'll see the output 13853855 which is nothing particularly extraordinary. It translates to a simple number as if you had written directly 13853855 .

You can convert a number into a hex string, but it would be more convenient for you to simply surround your hex value passed to themeOne in quotation marks, in other words the following:

<button type="button" onclick="themeOne('#D3649F','#000000','#666666')">Theme 1</button>

This is a string of course, but just like how width values generally contain units and require that the value be a string (ie '150px' instead of number 150 ), it is perfectly acceptable to assign a string of a hex number for color values.

Answer 3

Hi believe you need to have the colours as strings.... as in your function:

document.getElementById("page-content").style.color = "#FFFFFF"

So:

<button type="button" onclick="themeOne('#D3649F','#000000','#666666')">Theme 1</button>

might be the answer?

update: Yep, I tested it and this modification works.

Answer 4

You should use css instead of doing that via javascript...

You should use Javascript only for switching from one theme to another... here is an example:

 function themeCtrl($) { var select = $('#themeCtrl'); var container = $('#container'); var theme = 'theme-' + select.val(); select.change(function() { var _theme = 'theme-' + select.val(); container.removeClass(theme).addClass(_theme); }); } jQuery(document).ready(themeCtrl); 

 .theme-default .text-success { color: green; } .theme-default .text-error { color: red; } .theme-default .text-danger { color: orange; } .theme-default .text-info { color: cyan; } .theme-inverted .text-success { color: red; } .theme-inverted .text-error { color: green; } .theme-inverted .text-danger { color: cyan; } .theme-inverted .text-info { color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="themeCtrl"> <option selected value="default">Default</option> <option value="inverted">Inverted</option> </select> <hr /> <div class="theme-default" id="container"> <div class="text-success">TEXT SUCCESS</div> <div class="text-error">TEXT ERROR</div> <div class="text-danger">TEXT DANGER</div> <div class="text-info">TEXT INFO</div> </div>