CODEWITHSUNDEEP
javascriptcssevent-handlingonclick
Ryman Holmes
Ryman Holmes

Reputation: 756

Want to find a way of doing the revert of 'onclick' in javaScript

I want to find a way to make the page do something opposite to an onclick event.

So basically the below code shows how when a button (li) is clicked on it increases the padding, however i'm not sure of how to reset the clicked button when another button is clicked, something like an offClick which I know doesn't exist but I need a way to reset the padding back to how it originally was when another button (li) is clicked on within the same un-ordered List (ul), which is in this case <ul id="menubar">

Is there a simple way to do this?

p.s. please let me know if the question is not clear

<div class="container">
          <ul id="menubar" align="center">

          <li onmouseover="updateMenuItem(this)" onmouseout="revertMenuItem(this)" onclick="this.style.padding='20px'" >Page</li>


          </ul>
            </div>

Upvotes: 0

Views: 403

Answers (1)

Lee Bailey
Lee Bailey

Reputation: 3624

    function liClicked(clickedItem) {
        var list = document.getElementById('menubar');
        var listItems = list.getElementsByTagName('li');

        // reset the padding for all items
        for (var i = listItems.length - 1; i >= 0; i--) {
            listItems[i].style.padding = '0px';
        }
        // set the padding for the item that was clicked
        clickedItem.style.padding = '20px';
    }

Upvotes: 1

Related Questions