CODEWITHSUNDEEP
javascripthtmlcssbuttononclick
Nikole
Nikole

Reputation: 3

How to get automatic color change?

Once root button is clicked how can I get the other buttons to automatically change from black to respective color without the user clicking on the button? Should the other circles not be a button? Can I have the circles change color in 2 seconds after the root button has been clicked? Here is my JS Fiddle

<div class="interactiveBox">
<button id="root" onclick="changeColor(this,'#ff0000')" style="background-color: black"></button>
<button id="sacral" onclick="changeColor(this,'orange')" style="background-color: black"></button>
<button id="solar" onclick="changeColor(this,'yellow')" style="background-color: black"></button>
<button id="heart" onclick="changeColor(this,'green')" style="background-color: black"></button>
<button id="throat" onclick="changeColor(this,'blue')" style="background-color: black"></button>
<button id="third" onclick="changeColor(this,'purple')" style="background-color: black"></button>
<button id="crown" onclick="changeColor(this,'white')" style="background-color: black"></button>


function changeColor(obj,color) {
    //reset other buttons
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].style.backgroundColor = "#000000" ;
    }
    obj.style.backgroundColor=color;
}

Upvotes: 0

Views: 1233

Answers (3)

naota
naota

Reputation: 4718

My JSFiddle is here : http://jsfiddle.net/naokiota/4t89D/2/

I guess what you would like to do is something like this:

<div class="interactiveBox">
    <button id="root"   onclick="changeColor(this)" data-color="#ff0000"></button>
    <button id="sacral" onclick="changeColor(this)" data-color="orange"></button>
    <button id="solar"  onclick="changeColor(this)" data-color="yellow"></button>
    <button id="heart"  onclick="changeColor(this)" data-color="green"></button>
    <button id="throat" onclick="changeColor(this)" data-color="blue"></button>
    <button id="third"  onclick="changeColor(this)" data-color="purple"></button>
    <button id="crown"  onclick="changeColor(this)" data-color="white"></button>
</div>

JavaScript:

<script type="text/javascript">
function changeColor(obj) {
    //reset other buttons
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){      
        buttons[i].style.backgroundColor = "#000000" ;
    }
    obj.style.backgroundColor=obj.getAttribute('data-color');
    if(obj.id == "root"){
        setTimeout(changeAllcolors,2000);
    }
}
function changeAllcolors(){
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        var color = buttons[i].getAttribute('data-color');
        buttons[i].style.backgroundColor = color;
    }
}
</script>

Hope this helps.

Upvotes: 0

floribon
floribon

Reputation: 19193

You can dynamically trigger a click on your other buttons. Also, if you want to do that after 2 seconds, use setTimeout:

document.getElementById('root').addEventListener("click", function() {
  setTimeout(function() {
    document.querySelectorAll(".interactiveBox button:not(#root)").forEach(function() {
      this.click();
    });
  }, 2000);
});

Upvotes: 2

beeglebug
beeglebug

Reputation: 3542

I would add the target color of each button as a data attribute, then in the onclick event of the root button, loop through the other buttons, access the data attribute, and set the color appropriately.

HTML

<button id="root" class="colorChange" onclick="changeColor()" style="background-color: black"></button>
<button id="sacral" class="colorChange" data-color="orange" style="background-color: black"></button>
<button id="solar" class="colorChange" data-color="yellow" style="background-color: black"></button>
<button id="heart" class="colorChange" data-color="green' style="background-color: black"></button>
<button id="throat" class="colorChange" data-color="blue')style="background-color: black"></button>
<button id="third" class="colorChange" data-color="purple" style="background-color: black"></button>
<button id="crown" class="colorChange" data-color="white' style="background-color: black"></button>

Javascript (jQuery for simplicity)

function changeColor() {
    $('button.colorChange').each(function(button) {
        $(button).css({ 'background-color' : $(button).data('color') });
    });
}

Upvotes: 1

Related Questions