JavaScript: Toggle class with inline onClick?

Question

I am trying to replicate the css transition here.

Similar to the example, I have created:

<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>

<div class="box"></div>


.box {
width: 150px;
height: 150px;
background-color: red;
border: 1px solid #000;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.grow {
 width: 350px;
}

https://jsfiddle.net/swrhho41/15/

However, this doesnt seem to work. The grow class isn't being added to the div.

Is there more JS that is needed?

Looks like your onclick handler is looking for a div with an ID of 'box' and you're HTML has a div with a class of 'box'. — mherzig
– mherzig, Commented Dec 6, 2016 at 0:29

choz · Accepted Answer · 2016-12-06 00:28:55Z

7

box is not an id. It's a class.

Therefore, your document.getElementById selects nothing. Simply change it to,

document.getElementsByClassName('box')[0].classList.toggle('grow');

Here's the fiddle

answered Dec 6, 2016 at 0:28

choz

18k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JanR · Accepted Answer · 2016-12-06 00:29:13Z

1

The problem is your onclick code is looking for an id : getElementById

Yet your div has a class not an id, change it to

<div id="box"></div>

<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>

make sure to also update your css if you update it to id:

#box {
width: 150px;
/* etc */

Also if you want it to grow, make the width on the .grow !important.

Fiddle: https://jsfiddle.net/swrhho41/18/

answered Dec 6, 2016 at 0:29

JanR

6,1303 gold badges25 silver badges30 bronze badges

Comments

hackerrdave · Accepted Answer · 2016-12-06 00:31:01Z

0

Since 'box' is a className, you need to either set the element's ID to be "box":

<div id="box"></div>

Or update your selector to be:

document.querySelector('.box').classList.toggle('grow')

answered Dec 6, 2016 at 0:31

hackerrdave

6,7362 gold badges27 silver badges29 bronze badges

Comments

Yaman · Accepted Answer · 2016-12-06 00:49:53Z

0

<div id="box" class="box">

</div>

you are retrieving the item by Id, so Id should be box

answered Dec 6, 2016 at 0:49

Yaman

1,06117 silver badges33 bronze badges

Collectives™ on Stack Overflow

JavaScript: Toggle class with inline onClick?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related