Mouse click event on a simple list: keep the style on, and all others turn off

Question

I'm using a list to filter a number of other elements. Basically, I need help with making it show visually which one is the most recently selected item,

• Current Status: My current mouseover, mouseout and click events make it possible for hover and click events to create the desired style formatting.
• Desired Effect 1: When the user clicks a first item, and mouseouts, that item should remain formatted a certain way (it currently turns off because of mouseout).
• Desired Effect 2: When the user clicks another subsequent item, that subsequent item should take on the formatting, and the first one should lose that formatting.

HTML

<div class="sidebar">
  <div class="heading">
    <h1>Select Country</h1>
  </div>
  <ul class="countryList">
    <li class="countryItem" id="australia">Australia</li>
    <li class="countryItem" id="france">France</li>
    <li class="countryItem" id="germany">Germany</li>
  </ul>
</div>

JS

// I'm using this 'items' bit to control a lot of other code so would prefer a solution which keeps it.
const items = document.getElementsByClassName('countryItem')
    console.log(Array.from(items))


// Some Mouse Events
    Array.from(items).forEach(function(item) {
        item.addEventListener('mouseover', function(handleMouseOver) {
            item.style.color = '#007dbc';
            item.style.fontWeight = "700";
        })
    })
    
    Array.from(items).forEach(function(item) {
        item.addEventListener('mouseout', function(handleMouseOut) {
            item.style.color = '#000';
            item.style.fontWeight = "400";      
        })
    })
    
    Array.from(items).forEach(function(item) {
        item.addEventListener('click', function(handleClick) {
            item.style.color = '#0007dbc';
            item.style.fontWeight = "700";      
        })
    })

CSS

ul {
    list-style-type: none;
    font-size:12px;
    margin: 0;
    padding: 20px;
}

li {
  cursor:pointer;
}

Thank you!

Answer 1

The easiest way to solve this problem is create a flag var to specify which item is highlighted.

const items = document.getElementsByClassName('countryItem')

let clickedItem = ''

Array.from(items).forEach(function(item) {
    item.addEventListener('mouseover', function(handleMouseOver) {
        item.style.color = '#007dbc';
        item.style.fontWeight = "700";
    })
})

Array.from(items).forEach(function(item) {
    item.addEventListener('mouseout', function(mouseOverEvent) {
        if (mouseOverEvent.target.id === clickedItem) return;
        item.style.color = '#000';
        item.style.fontWeight = "400";      
    })
})

Array.from(items).forEach(function(item) {
    item.addEventListener('click', function(clicnEvent) {
        if (clickedItem) {
          const prevItem = document.getElementById(clickedItem)
          prevItem.style.color = '#000';
          prevItem.style.fontWeight = "400";
        }
        clickedItem = clicnEvent.target.id
        item.style.color = '#0007dbc';
        item.style.fontWeight = "700";      
    })
})

ul {
    list-style-type: none;
    font-size:12px;
    margin: 0;
    padding: 20px;
}

li {
  cursor:pointer;
}

<div class="sidebar">
  <div class="heading">
    <h1>Select Country</h1>
  </div>
  <ul class="countryList">
    <li class="countryItem" id="australia">Australia</li>
    <li class="countryItem" id="france">France</li>
    <li class="countryItem" id="germany">Germany</li>
  </ul>
</div>