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

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 >
  <div >
    <h1>Select Country</h1>
  </div>
  <ul >
    <li  id="australia">Australia</li>
    <li  id="france">France</li>
    <li  id="germany">Germany</li>
  </ul>
</div>

// 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!

CodePudding user response：

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 >
  <div >
    <h1>Select Country</h1>
  </div>
  <ul >
    <li  id="australia">Australia</li>
    <li  id="france">France</li>
    <li  id="germany">Germany</li>
  </ul>
</div>