Change background Color of a div once you click an li item

Question

I need your expertise and help again, What i'm trying to do is when you click the List item below it will get the background color from the span and apply/change the color on the main div every time the user clicks on the list item

Note: the list item is not only two item it can be more.

HTML:

    <li class="variable-item color-variable-item" title="Black" data-value="black">
        <span class="variable-item-span variable-item-span-color" style="background-color:#000000;"></span>
   </li>
    <li class="variable-item color-variable-ite" title="Red" data-value="red">
        <span class="variable-item-span variable-item-span-color" style="background-color:#dd3333;"></span>
    </li>

Main HTML that will change the background color once you've click the list item

<div class="slick-list"></div>

JS that i got

$("li.variable-item.color-variable-item span").each(function(index, value) {
  var colorjg = $( this ).css( "background-color" );
  $(".slick-list.draggable").css('background-color', colorjg);
});

Answer 1

You can simply use a click function to check which li > span was clicked and get its color and apply that color to your div

This will work with multiple li's if you have them (I have added few different li with different color for demo purposes)

Live Demo:

 $(".variable-item > span").click(function() { var colorjg = $(this).css("background-color"); //get the bg color $(".slick-list").css('background-color', colorjg); //apply the bg color });

 li span { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="variable-item color-variable-item" title="Black" data-value="black"> <span class="variable-item-span variable-item-span-color" style="background-color:blue;">Click me</span> </li> <li class="variable-item color-variable-ite" title="Red" data-value="red"> <span class="variable-item-span variable-item-span-color" style="background-color:yellow;">Click me</span> </li> <li class="variable-item color-variable-ite" title="Red" data-value="red"> <span class="variable-item-span variable-item-span-color" style="background-color:red;">Click me</span> </li> <li class="variable-item color-variable-ite" title="Red" data-value="red"> <span class="variable-item-span variable-item-span-color" style="background-color:green;">Click me</span> </li> <br> <br> <div class="slick-list">dsds</div>

Answer 2

js:

    let liEl = document.querySelectorAll('.variable-item');
    let divEl = document.querySelector(.slick-list'');
    liEl.forEach((el) => {
      el.addEventListener('click', () => {
        divEl.classList.add('redBg');
      });
    });

css:

.redBg{
background-color: red;
}

Answer 3

One possible solution could be to surround the section you want to change in a.Using a JS event, you can write a function that will be executed every time your is clicked on. Here is a link going into more detail about the "onclick" event. I want to emphasize "onclick" executes a function, so make sure to use parentheses when calling the function by name (ex: myFunction()).