ToggleNotFullyWorking

In this example below you will see how to do a ToggleNotFullyWorking with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ellyria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ellyria ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ToggleNotFullyWorking</title>
  		<title>Color Test</title>
		<meta charset="utf-8" />

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <button id="myButton" onclick="toggleColor('exampleOneButton','exampleOneElement')">CLICK FOR BLUE</button>
<p id="myElement">EXAMPLE ONE</p>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ellyria/togglenotfullyworking-BwELKG */
#myElement {
	color: red;
	}


/*Downloaded from https://www.codeseek.co/Ellyria/togglenotfullyworking-BwELKG */
var button = document.getElementById('myButton');
var target = document.getElementById('myElement');
console.log(target.style.color);
function toggleColor() {
	console.log(target.style.color);
	//The following line doesn't work:
  target.style.color = (target.style.color != 'red' ? 'red' : 'blue' );
	//The following line works if you enable it instead:
  //target.style.color = (target.style.color != 'blue' ? 'blue' : 'red' );
	button.innerHTML = (button.innerHTML != 'CLICK FOR BLUE' ? 'CLICK FOR BLUE' : 'CLICK FOR RED' );
	}

Comments