Restore font-weight if a different list item is chosen

Question

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text also makes it bold simultaneously.

How can I ensure that only one text element is bold at a time?

You can view my code on JSFiddle: http://jsfiddle.net/6XMzf/ or see below:

CSS:

/* CSS code goes here */

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sample HTML Page</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="container">
            <p class="text-bold">Text 1</p>
            <p class="text-normal">Text 2</p>
            <p class="text-normal">Text 3</p>
        </div>
        <script>
            const texts = document.querySelectorAll('p');

            texts.forEach(text => {
                text.addEventListener('click', function() {
                    texts.forEach(t => t.classList.remove('text-bold'));
                    this.classList.add('text-bold');
                });
            });
        </script>
    </body>
</html>

javascript html css

Answer 1

Answer №1

When faced with the challenge of implementing a feature like adding and removing classes in plain Javascript without using a selector engine such as jQuery, there is a straightforward approach that can be taken:

function addClass(elem, className) {
    if (elem.className.indexOf(className) == -1) {
        elem.className += " " + className;
    }
}

function removeClass(elem, className) {
    elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}

var lastSelected = null;

function initializeNavigationClickHandler() {
    var nav = document.getElementById('navigationText');
    var navItems = nav.getElementsByTagName('li');

    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener('click', function() {
            addClass(this, "selected");
            if (lastSelected) {
                removeClass(lastSelected, "selected");
            }
            lastSelected = this;
        }, false);
    }
}

initializeNavigationClickHandler();

To style the selected items, you would need to define a CSS rule like this:

.selected {font-weight: 800;}

This method offers flexibility in styling as you can easily add or modify additional CSS rules within the .selected class without having to make changes directly in your code.

You can view a demo of this implementation here: http://jsfiddle.net/jfriend00/rrxaQ/

Answer 2

When faced with the challenge of implementing a feature like adding and removing classes in plain Javascript without using a selector engine such as jQuery, there is a straightforward approach that can be taken:

function addClass(elem, className) {
    if (elem.className.indexOf(className) == -1) {
        elem.className += " " + className;
    }
}

function removeClass(elem, className) {
    elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}

var lastSelected = null;

function initializeNavigationClickHandler() {
    var nav = document.getElementById('navigationText');
    var navItems = nav.getElementsByTagName('li');

    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener('click', function() {
            addClass(this, "selected");
            if (lastSelected) {
                removeClass(lastSelected, "selected");
            }
            lastSelected = this;
        }, false);
    }
}

initializeNavigationClickHandler();

To style the selected items, you would need to define a CSS rule like this:

.selected {font-weight: 800;}

This method offers flexibility in styling as you can easily add or modify additional CSS rules within the .selected class without having to make changes directly in your code.

You can view a demo of this implementation here: http://jsfiddle.net/jfriend00/rrxaQ/

Answer 3

Answer №2

If you have knowledge of jQuery, solving this problem becomes easier. Allow me to demonstrate the jQuery method for highlighting and unhighlighting elements.

$("#navigationText li").click( function() { 
  $("#navigationText li").css("fontWeight", "100");
  $(this).css("fontWeight", "400");
});

You can achieve the same result without using jQuery as well. You can either use a global variable to store the currently bolded item and then remove the font weight or you can remove the font weight from all items (a brute force approach).

        //not tested yet with global variable to hold current selection
        var nav = document.getElementById('navigationText');
        var activeItem = null;

        var navItems = nav.getElementsByTagName('li');

        for (var i = 0; i < navItems.length; i++) {
            navItems[i].addEventListener('click', function() {
                if (activeItem) {activeItem.style.fontWeight = '100'; }
                this.style.fontWeight = '400';
                activeItem = this;
            }, false);
        }

        //I'm not inclined to write a brute force solution for you at the moment!

Answer 4

If you have knowledge of jQuery, solving this problem becomes easier. Allow me to demonstrate the jQuery method for highlighting and unhighlighting elements.

$("#navigationText li").click( function() { 
  $("#navigationText li").css("fontWeight", "100");
  $(this).css("fontWeight", "400");
});

You can achieve the same result without using jQuery as well. You can either use a global variable to store the currently bolded item and then remove the font weight or you can remove the font weight from all items (a brute force approach).

        //not tested yet with global variable to hold current selection
        var nav = document.getElementById('navigationText');
        var activeItem = null;

        var navItems = nav.getElementsByTagName('li');

        for (var i = 0; i < navItems.length; i++) {
            navItems[i].addEventListener('click', function() {
                if (activeItem) {activeItem.style.fontWeight = '100'; }
                this.style.fontWeight = '400';
                activeItem = this;
            }, false);
        }

        //I'm not inclined to write a brute force solution for you at the moment!

Restore font-weight if a different list item is chosen

Answer №1

Answer №2

Similar questions

Javascript code to verify whether the page is currently positioned at the top

Issue: The error message "undefined variable 'angular'" appears when attempting to access offline files stored on a network drive

What is the correct way to make an image adjust to changes in a browser's size?

Why isn't the customer's name a part of the CFCustomerDetails class?

Transform stereo sound to mono using JavaScript

Creating a vertical triangle pointing to the right as the border of a div element

Strange symbols keep appearing in my output from PHP

An error has occurred in the callback function for the watcher "function () { return this._data.$$state }": "Error: [vuex] It is forbidden to modify the vuex store state outside of a mutation"

Using Express and Node.js to implement the Google Maps API

The backend is serving HTML content, but the frontend is not initiating any redirects

Encountering issues when adding information to a React table

Sending out a command does not equate to establishing Redux with an outcome

Looking to transform this PHP function into a jQuery function that generates all the possible combinations of values in an array?

Extract Information from a Website

Has CSS3 been recognized as an official standard?

Click on the hyperlinks one by one that trigger ajax events

Tips for sending and retrieving parameters using the POST technique

The Ajax request is not passing the values of the submit button as expected

Launching Android Calendar app using Intent from a web browser (Chrome)

Trouble with firing the click event using document.createElement('a') in Firefox