one button two if statements for a css div in javascript

Question

If I use two buttons it works fine now I wonder if I could use just one and how, this is the code for two buttons however I want to use only one button to execute the code that changes the style of the div, for instance the buttons code that I wrote is:

<title></title>
<style>#ok{width:100px;height:100px;background-color:black;}</style>
</head>

<body>
<div id="ok">ok</div>
<button id="a">on</button>
<button id="b">off</button>
<script>
var a=document.querySelector("#a");
var b=document.getElementById("ok");
a.addEventListener("click",k,false);
var c=document.querySelector("#b");
c.addEventListener("click",g,false);
function k(){
b.style.backgroundColor="yellow";
};
function g(){
b.style.backgroundColor="black";
};
</script>

Answer 1

I think what do you want to do is:

document.querySelector("#a").addEventListener("click", k, false);

function k() {
    var a = document.querySelector("#a");
    var ok = document.getElementById("ok");
    if(ok.style.backgroundColor=="yellow"){
        a.innerHTML = "on";
        ok.style.backgroundColor = "black";
    }
    else{
        a.innerHTML = "off";
        ok.style.backgroundColor = "yellow";
    }
};

This your working DEMO .

one button two if statements for a css div in javascript

Question

1 answers

solution1
0 ACCPTED 2014-03-01 19:57:41

one button two if statements for a css div in javascript

Question

1 answers

solution1 0 ACCPTED 2014-03-01 19:57:41

solution1
0 ACCPTED 2014-03-01 19:57:41