Created
November 26, 2017 21:34
-
-
Save boydx/9f4ea9b459bccdf838d31c4b975755f4 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/cujimip
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #buttonStyle { | |
| background: red; | |
| } | |
| #buttonStyle2 { | |
| background: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="buttonStyle">Click me</button> | |
| | | |
| <button id="buttonStyle2">Click me, too!</button> | |
| <script id="jsbin-javascript"> | |
| /** Aproach 1: use a swtich **/ | |
| var x = 0; // set counter on page load | |
| document.getElementById('buttonStyle').addEventListener("click", function() { | |
| var y = document.getElementById('buttonStyle'); | |
| if (x === 1) { | |
| x = 0; | |
| y.style.background = 'red'; | |
| // myFirstFunction(parameter); function call | |
| } else { | |
| x = 1; // switch value in function | |
| y.style.background = 'green'; | |
| // mySecondFunction(parameter); function call | |
| } | |
| }); | |
| /** Aproach 2: test the properties of the element we're changing **/ | |
| document.getElementById('buttonStyle2').addEventListener("click", function() { | |
| var y = document.getElementById('buttonStyle2'); | |
| if (y.style.background.includes('green')) { // JS string includes() returns true | |
| y.style.background = 'red'; | |
| // myFirstFunction(parameter); function call | |
| } else { | |
| y.style.background = 'green'; | |
| // mySecondFunction(parameter); function call | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">#buttonStyle { | |
| background: red; | |
| } | |
| #buttonStyle2 { | |
| background: red; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| /** Aproach 1: use a swtich **/ | |
| var x = 0; // set counter on page load | |
| document.getElementById('buttonStyle').addEventListener("click", function() { | |
| var y = document.getElementById('buttonStyle'); | |
| if (x === 1) { | |
| x = 0; | |
| y.style.background = 'red'; | |
| // myFirstFunction(parameter); function call | |
| } else { | |
| x = 1; // switch value in function | |
| y.style.background = 'green'; | |
| // mySecondFunction(parameter); function call | |
| } | |
| }); | |
| /** Aproach 2: test the properties of the element we're changing **/ | |
| document.getElementById('buttonStyle2').addEventListener("click", function() { | |
| var y = document.getElementById('buttonStyle2'); | |
| if (y.style.background.includes('green')) { // JS string includes() returns true | |
| y.style.background = 'red'; | |
| // myFirstFunction(parameter); function call | |
| } else { | |
| y.style.background = 'green'; | |
| // mySecondFunction(parameter); function call | |
| } | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #buttonStyle { | |
| background: red; | |
| } | |
| #buttonStyle2 { | |
| background: red; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** Aproach 1: use a swtich **/ | |
| var x = 0; // set counter on page load | |
| document.getElementById('buttonStyle').addEventListener("click", function() { | |
| var y = document.getElementById('buttonStyle'); | |
| if (x === 1) { | |
| x = 0; | |
| y.style.background = 'red'; | |
| // myFirstFunction(parameter); function call | |
| } else { | |
| x = 1; // switch value in function | |
| y.style.background = 'green'; | |
| // mySecondFunction(parameter); function call | |
| } | |
| }); | |
| /** Aproach 2: test the properties of the element we're changing **/ | |
| document.getElementById('buttonStyle2').addEventListener("click", function() { | |
| var y = document.getElementById('buttonStyle2'); | |
| if (y.style.background.includes('green')) { // JS string includes() returns true | |
| y.style.background = 'red'; | |
| // myFirstFunction(parameter); function call | |
| } else { | |
| y.style.background = 'green'; | |
| // mySecondFunction(parameter); function call | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice code