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

Conflicting Angular controller names within different modules

Transferring data between Javascript and PHP with AJAX and JQuery

Incorporating video responses into an HTML player using Node.js with the req.pipe(res) method

Tips for accessing arrayList data within a loop in JavaScript and displaying it in an HTML <c: forEach> tag

An error persists in Reactjs when attempting to bind a function that remains undefined

Gallery tiled with images enclosed in <a> tags

Audio waves visualization - silence is golden

Issue with Material UI Textfield functionality on mobile Safari browser

Displaying JQuery dialogs briefly show their contents before the page finishes loading

Differences between Vue.js onMounted and watching refsVue.js offers

Guide to decoding JSONP data sent from a remote server

The premature firing of the fireContentLoadedEvent in Internet Explorer is causing issues

Struggling with retrieving the $id variable from the view in both the controller and the database through Ajax

Does setInterval consume a significant amount of CPU resources?

Which JavaScript library or template engine would be most suitable for this scenario?

The text color is being influenced by the transparent background behind it

Loading screen while all files and audio are being loaded

Executing a function on the window object in JavaScript

Bringing in LESS variables to Rails 3

Troublesome update: Migrating XState's Reddit example from Vue 2 to Vue 3