How do I reverse an onclick event with another click?

Question

function show()
{
var elem = document.getElementById("pop").querySelector('li:nth-child(3)');
elem.style.width = "500px";
}
</script>

I have this code attached to an onclick

<li onclick="show()">

The element is originally 200px and then turns into 500px when clicked. How do I make it work so that when I click it again it goes back to 200??

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

The best thing to do would be to use a CSS class to set the width. This has the advantage that:

You don't have to specify the width in multiple places (CSS and JS) (-> easier to maintain)
You don't have to know the default width of the element (-> more flexible)

Example:

CSS:

.wide {
    width: 500px;
}

HTML:

<li onclick="show(this)">...</li>

JS:

function show(elem) {
    elem.classList.toggle('wide');
}

DEMO

Have a look at the MDN documentation regarding classList for information about browser support. You can also find alternatives in this excellent question/answer about handling CSS classes on elements: Change an element's class with JavaScript

To learn more about event handling (ways to bind event handlers, information available inside event handlers, etc), have a look at the excellent articles at quirksmode.org.

edited May 23 '17 at 10:28

Community

1
1

answered Feb 21 '14 at 06:44

Felix Kling

795,719
175
1,089
1,143

Do I still define elem within the function? – AllTheTime1111 Feb 21 '14 at 06:51
1

`elem` is the parameter of the function. The element that triggered the event is passed as argument: `onclick="show(this)"`. Of course you can also use your code instead (`document.getElementById("pop")...`) but I assumed you want to get a reference to the clicked list element anyway, in which case my function definition is more generic and simpler. Read the quirksmode articles, they explain very well how to access the element that triggered the event and how `this` works. – Felix Kling Feb 21 '14 at 06:52
1

No, that definitely makes more sense; allowing me to use the same code for multiple elements. Thanks for the information. – AllTheTime1111 Feb 21 '14 at 06:57

score 1 · Answer 2 · answered Feb 21 '14 at 06:38

1

function show() {
    var elem = document.getElementById("pop").querySelector('li:nth-child(3)'),
        width = parseInt(elem.style.width, 10);
    if (width === 500) {
        elem.style.width = "200px";
    }
    else {
        elem.style.width = "500px";
    }
}

Although, I'd probably name the function toggle or something similar and not inline the click handler.

answered Feb 21 '14 at 06:38

okcoker

1,329
9
16

what does `width = parseInt(elem.style.width, 10);` do? – AllTheTime1111 Feb 21 '14 at 06:44
1

It will turn a string of something like `"500px"` to a number `500`. From there you can add to it or do anything you want like any other number – okcoker Feb 21 '14 at 06:45

score 0 · Answer 3 · answered Feb 21 '14 at 06:38

Use a control variable

var clickControl = false;
function show()
{
    if(clickControl)
    {
        var elem = document.getElementById("pop").querySelector('li:nth-child(3)');
        elem.style.width = "500px";
        clickControl = !clickControl;
    }
    else
    {
        var elem = document.getElementById("pop").querySelector('li:nth-child(3)');
        elem.style.width = "200px";
        clickControl = !clickControl;
    }
}

How do I reverse an onclick event with another click?

3 Answers3