My button don’t toggle itself

@carlosioeAug 24.2019

Hello everybody I have a problem with my code, for some reason I cannot make my div box be with a lightblue backgroundcolor change to purple when I click on the button and change from purple to lightblue when I click again.
`https://codepen.io/josemon322/pen/mdbRBeK
html
`<button onclick=”myFunction()”>Default Button</button>
<div id=”myBox”>

</div>
`
css
`
button {
display: block;
margin: 5px;
}
#myBox {
margin: 5px;
display: block;
height: 150px;
width: 250px;
background-color: lightblue;
}
.light-blue {
background-color: lightblue;
}

.purple {
background-color: purple;
}`
js
`function myFunction() {

// Define myBox div
const myDiv = document.querySelector(“#myBox”);

// Do a check to see which color class myDiv contains
if (myDiv.classList.contains(“light-blue”)) {
// Remove light blue class
myDiv.classList.remove(“light-blue”);
// Add purple class
myDiv.classList.add(“purple”);
}
else if(myDiv.classList.contains(“purple”)) {
// Remove purple class
myDiv.classList.remove(“purple”);
// Add light-blue class
myDiv.classList.add(“light-blue”)
}
}
`

to post a comment

JavaScript

6 Comments(s) _↴

@codyhillAug 24.2019 — #@carlosioe#1607956 You complicated yourself a little bit. You don't need the if statement to do that.

All you need is to add an addEventListener on the button and toggle the class of the box with .toggle.

Also, for this to work you need to add the light blue background-color as a different class.

Here is the code:

<i>
 </i>&lt;button class="button"&gt;Default Button&lt;/button&gt;
 &lt;div id="myBox" class="lightblue"&gt;&lt;/div&gt;

<i>
 </i>#myBox {
 margin: 5px;
 display: block;
 height: 150px;
 width: 250px;
 }
 
 .lightblue {
 background: lightblue;
 }
 .purple {
 background: purple;
 }

JS:

<i>
 </i>const button = document.querySelector('.button');
 const box = document.querySelector('#myBox');
 
 button.addEventListener('click', (e) =&gt; {
 box.classList.toggle('purple');
 });

You can test it here: https://codepen.io/raul-rogojan/pen/GRKWgqr?editors=0110

BTW: You also need both the button and the box as const in javaScript.

@daveyerwinAug 24.2019 — #@carlosioe#1607956

you almost had it right ...

``<i>
 </i>&lt;style&gt;
 button {
 display: block;
 margin: 5px;
 }
 #myBox {
 margin: 5px;
 display: block;
 height: 150px;
 width: 250px;
 }
 .light-blue {
 background-color: lightblue;
 }
 .purple {
 background-color: purple;
 }
 &lt;/style&gt;
 
 
 &lt;button onclick="myFunction()" &gt;Default Button&lt;/button&gt;
 &lt;div id="myBox" class="light-blue"&gt;
 &lt;/div&gt;
 
 
 &lt;script&gt;
 function myFunction() { 
 
 // Define myBox div
 const myDiv = document.querySelector("#myBox");
 
 // Do a check to see which color class myDiv contains
 if (myDiv.classList.contains("light-blue")) {
 // Remove light blue class
 myDiv.classList.remove("light-blue");
 // Add purple class
 myDiv.classList.add("purple");
 } 
 else if(myDiv.classList.contains("purple")) { 
 // Remove purple class 
 myDiv.classList.remove("purple");
 // Add light-blue class
 myDiv.classList.add("light-blue")
 }
 }
 &lt;/script&gt;<i>
 </i>``

@carlosioeauthorAug 24.2019 — #@RaulRogojan and @DaveyErwin thanks alot your help was so useful!!!

@JMRKERAug 25.2019 — #Just for completeness, here's one last alternative.

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
 &lt;title&gt; HTML5 Test Page &lt;/title&gt;
 
 &lt;style&gt;
 button { display: block;  margin: 5px; }
 #myBox {
 margin: 5px;
 display: block;
 height: 150px;
 width: 250px;
 }
 .light-blue { background-color: lightblue; }
 .purple { background-color: purple; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;button onclick="myFunction()" &gt;Default Button&lt;/button&gt;
 &lt;div id="myBox" class="light-blue"&gt; &lt;!-- NOTE: be sure to initialize class --&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 function myFunction() { 
 // Define myBox div
 const myDiv = document.getElementById("myBox");
 myDiv.classList.toggle('light-blue');
 myDiv.classList.toggle('purple');
 }
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Good Luck! :)

@daveyerwinAug 25.2019 — #@JMRKER#1607961

if you are going to put the "onclick"

in the HTML, then get the most out

of it ...

``<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
 &lt;title&gt; HTML5 Test Page &lt;/title&gt;
 
 &lt;style&gt;
 button { display: block;  margin: 5px; }
 #myBox {
 margin: 5px;
 display: block;
 height: 150px;
 width: 250px;
 }
 .light-blue { background-color: lightblue; }
 .purple { background-color: purple; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;button onclick=myFunction(myBox.classList)&gt;Default Button&lt;/button&gt;
 &lt;div id="myBox" class="light-blue"&gt; &lt;!-- NOTE: be sure to initialize class --&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 function myFunction(s){s.toggle('purple');}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``

@JMRKERAug 25.2019 — #@DaveyErwin#1607967

@DaveyErwin#1607967

While neither toggle will work without JS being active,

I like your thinking. To take the JS out of the HTML, you could:

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
 &lt;title&gt; HTML5 Test Page &lt;/title&gt;
 
 &lt;style&gt;
 button { display: block;  margin: 5px; }
 #myBox {
 margin: 5px;
 display: block;
 height: 150px;
 width: 250px;
 }
 .light-blue { background-color: lightblue; }
 .purple { background-color: purple; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;button id="tglBtn"&gt;Default Button&lt;/button&gt;
 &lt;div id="myBox" class="light-blue"&gt; &lt;!-- NOTE: be sure to initialize class --&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 function init() {
 document.getElementById('tglBtn').addEventListener(
 'click',
 function () { myFunction(document.getElementById('myBox').classList) }
 );
 } init();
 
 function myFunction(s){s.toggle('purple');}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

Can't get true lastChild in node Downloading font automatically Calculations within a form

Success!

Help @carlosioe spread the word by sharing this article on Twitter...

Tweet This

My button don’t toggle itself

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

My button don’t toggle itself

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴