making a network select app but how can i make sure that only one is selected, the selected one gets the highlighting color???.

Question

<div class="container">
<header>
<h3>Select a sim for data</h3>
</header>

<div>
<ul class="list">
<li id="one">Airtel UG</li>
<li id = 'two'>MTN Uganda</li>
</ul>
</div>
</div>
const one = document.querySelector('#one')
const two = document.querySelector('#two')

highligting_function = network => {
if ( network === 'Airtel UG'){
two.classList.remove('highligting')
one.classList.toggle('highlighting');
} else{
one.classList.remove('highligting')
two.classList.toggle('highlighting');
}
}

Answer 1

Generally when you want to create a single-choice list, you can use the <select> html tag.

https://www.w3schools.com/tags/tag_select.asp

Applying a unique style to the selected item is possible with the option:checked pseudotag, even without using any javascript.

https://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-option-elements

Answer 2

Tibor Santa brother it works though it creates a drop down list which I don't want. It's like I have list items en when a user clicks on one it's background coolor changes Incase he clicks on the another the background color leaves the first one en goes to the latter like that like that.

Answer 3

Example HTML with radio buttons:

<input type="radio" id="india" name="country">
<label for="india">India</label><br>
<input type="radio" id="china" name="country">
<label for="china">China</label><br>
<input type="radio" id="japan" name="country">
<label for="japan">Japan</label><br>

Example CSS:

input:checked + label { background-color: yellow; }

The checked pseudotag will only take effect, when the radio button is selected. in case you pick another input with the same name, the effect will revert to the default and the background color disappears.

If you want to hide the circles, you can add this and the text still remains clickable:

input[type=radio] { display: none; }

https://code.sololearn.com/WhI1fPpbSpRo/?ref=app