how to change a css background onclick

Question

Please check this JSFiddle , Here there are two div named step-wrapper and inside these step-wrapper div there are three div named step-box . Its written in such a way that while clicking on a step-box div its background color changes to yellow.

I have added a reset button. What I needed is on clicking the reset button, the color of last clicked step-box div should changes to white. But in this code, when I click the reset button all the step-box background color changes to white.

Answer 1

I believe this is what you're looking for: https://jsfiddle.net/richardgirges/8m9qstg3/11/

We're saving a reference to the lastClicked div, and targeting it specifically when reset is hit. Like so:

var $lastClicked = null;

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
    $lastClicked = $(this);
});


$('.reset').on('click',function(){
    if ( $lastClicked ) {
        $lastClicked.css( 'background-color', '#fff' );
        $lastClicked = null;
    }
});

EDIT: Improved the code. Using explicit var instantiation to keep it within scope.

Answer 2

It looks kind of weird when you have only one reset button at the very end but only want to reset only one wrapper. How about if we add a reset button inside the wrapper div and resets only that wrapper when we click each reset? See if you like it.

HTML:

<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>

    </p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>

    </p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>

    </p>
</div>
<div class="reset"> Reset </div>
</div>
<br>
<br>Second Wrapper
    <br>
        <br>
 <div class="step_wrapper">
 <div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>

    </p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>

    </p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>

    </p>
</div>
<div class="reset"> Reset </div>
</div>

Javascript:

$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#eeffaa');
});


$('.reset').on('click',function(){
$( this ).parent().find(".step_box").css( 'background-color', '' );
});

Answer 3

Add class last to last clicked element and reset this one.

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
    $('.last').removeClass('last');
    $(this).addClass('last');
});


$('.reset').on('click',function(){
    $( ".step_box.last" ).css( 'background-color', '' );
});

http://jsfiddle.net/8m9qstg3/7/

Answer 4

See this fiddle

What I have done is that, I've added an ID attribute to your step_box class and used the id to set a hidden field when the step_box is clicked. And later in the onClick of reset, i ve used the id that is set in the hidden field.

Please the code below..

JS

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
    document.getElementById('test').value=this.id;
});


$('.reset').on('click',function(){
    var a= document.getElementById('test').value;
    $( "#"+a ).css( 'background-color', '' );

});

HTML

<div class="step_wrapper">
    <div class="step_box" onclick="show('Page1');" id="1"> <span>Content of page 1</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page2');" id="2"> <span>Content of page 2</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page3');" id="3"> <span>Content of page 3</span>

        </p>
    </div>
</div>
<br>
<br>Second Wrapper
<br>
<br>
<div class="step_wrapper">
    <div class="step_box" onclick="show('Page1');" id="4"> <span>Content of page 1</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page2');" id="5"> <span>Content of page 2</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page3');" id="6"> <span>Content of page 3</span>

        </p>
    </div>
</div>
<input type="hidden" id="test" />
<div class="reset">Reset</div>

Answer 5

http://jsfiddle.net/8m9qstg3/6/

I created a variable named last and assigned the clicked object to it. This way, when you hit reset, it will know what the last element is that was clicked. If you're looking for multiples you could create an array and use .push() to create a string of last elements clicked, but this should answer your question.

var last;

$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
last = this;
});


$('.reset').on('click',function(){
$(last).css("background-color", "white");
});`