Change background of selected item by clicking

Question

I've got a question - is it possible to change color/background of item after clicking on it?

Let's have a simple example: We have two boxes like:

<a href="#" id="box1"></a>
<a href="#" id="box2"></a>

and three links with classes: red, black, blue. Is it possible to firstly click one of those boxes (to select/activate them) and then change their color by clicking proper link (the one with class)? when I will now that in such simple example i assume it will be easier to me to adapt it to SVG graphics on which i wanted to work on.

thanks!

Answer 1

You can use jQUery to achieve the same. Created the Plunker link for your reference, if this is what you want..

Answer 2

You could try something like this (assuming jQuery, although this can be done with vanilla javascript as well):

Add a class to each of your boxes:

<a href="#" id="box1" class="box">Box 1</a>

Then add an event listener to mark a box as 'selected' when it is clicked on.

$('.box').on('click', function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

Then, if you have a color link:

<a href="#" class="color-link" data-color="red">Red</a>

You can put an event on it like so:

$('.color-link').on('click', function() {
    $('.selected').css('background', $(this).data('color'));
});

Which should change the background css of the last-clicked-on box for you.