Skip to content

Instantly share code, notes, and snippets.

@boydx

boydx/index.html

Created November 26, 2017 21:34
Show Gist options
  • Save boydx/9f4ea9b459bccdf838d31c4b975755f4 to your computer and use it in GitHub Desktop.
Save boydx/9f4ea9b459bccdf838d31c4b975755f4 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/cujimip
Raw
index.html
<!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>
Raw
jsbin.cujimip.css
#buttonStyle {
background: red;
}
#buttonStyle2 {
background: red;
}
Raw
jsbin.cujimip.js
/** 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
}
});
@Tresor-Kasenda
Copy link

Nice code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment