Change css background color in my function

Question

I have this code to change my buttons inner HTML when they are clicked. I also want to change the CSS background color when button is clicked, but I couldn't get it to work.

<button id="showTop" class="menubtn" >Show Menu</button>

var menuTop = document.getElementById('cbp-spmenu-s3'),
    showTop = document.getElementById('showTop'),
    body = document.body;

showTop.onclick = function() {
    if (showTop.innerHTML == 'Show Menu') {
        showTop.innerHTML = 'Hide Menu';
    } else {
        showTop.innerHTML = 'Show Menu';
    };

    classie.toggle(this, 'active1');
    classie.toggle(menuTop, 'cbp-spmenu-open');
    disableOther('showTop');
};

function disableOther(button) {
    if (button !== 'showTop') {
        classie.toggle(showTop, 'disabled');
    }
}

^^ a small js lib for working with classes. https://github.com/desandro/classie — Shan Robertson, Feb 11 '15 at 18:35
Well, it looks like it should work. How about a demo of the problem? http://jsfiddle.com — isherwood, Feb 11 '15 at 18:37
Tags aren't only used to describe the code. They also allow for additional answer flexibility. — isherwood, Feb 11 '15 at 18:40
Not only I also don't see jQuery here, I don't see declaration of `classie` varibale. — Regent, Feb 11 '15 at 18:40
ClassieJS (as I've just learned) is a utility library. See the tag. — isherwood, Feb 11 '15 at 18:40

score 1 · Answer 1 · answered Feb 11 '15 at 18:46

1

You mean like this?

if (showTop.innerHTML == 'Show Menu') {
    showTop.style.backgroundColor = "blue";
    showTop.innerHTML = 'Hide Menu';
} else {
    showTop.innerHTML = 'Show Menu';
    showTop.style.backgroundColor = "";
};

http://jsfiddle.net/richiwarmen/pcjhsy99/

answered Feb 11 '15 at 18:46

Richi

100
8

would that also work if i wanted to change margin and what not do i jsut replace backgroundcolor with margin for eg – Abdel hakeem Feb 13 '15 at 12:07
Sure you can, because it's an html domelement. give it a try to define in in in such a program like dreamweaver. var x = document.getElementById ("id"); x.style. You will see a list of all CSS styles that you can set after x.style. – Richi Feb 16 '15 at 10:13

Change css background color in my function

1 Answers1