nakagak1/Onclick3.html

## Onclick3.html
<html>
	<head>
		<style>
			.foo-before {
				background-color: white;
				color: black;
			}
			.foo-before p {
				text-decoration: none;
			}
			.foo-before + div {
				text-decoration: none;
			}

			.foo-after {
				text-decoration: none;
			}

			.foo_after {
				background-color: black;
				color: white;
			}
			.foo-after p {
				text-decoration: underline;
			}
			.foo-after + div {
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="foo" class="foo-before">
			<p>one</p>
			<p>two</p>
			<p>three</p>
			<p>four</p>
		</div>
		<div>
			This is sample text.
		</div>
		<script>
			var foo = document.getElementById('foo');
			foo.onclick = function toggleStyle() {
				this.classList.toggle('foo-after');
				this.classList.toggle('foo-before');
			};
		</script>
	</body>
</html>
	<html>
	<head>
	<style>
	.foo-before {
	background-color: white;
	color: black;
	}
	.foo-before p {
	text-decoration: none;
	}
	.foo-before + div {
	text-decoration: none;
	}

	.foo-after {
	text-decoration: none;
	}

	.foo_after {
	background-color: black;
	color: white;
	}
	.foo-after p {
	text-decoration: underline;
	}
	.foo-after + div {
	text-decoration: line-through;
	}
	</style>
	</head>
	<body>
	<div id="foo" class="foo-before">
	<p>one</p>
	<p>two</p>
	<p>three</p>
	<p>four</p>
	</div>
	<div>
	This is sample text.
	</div>
	<script>
	var foo = document.getElementById('foo');
	foo.onclick = function toggleStyle() {
	this.classList.toggle('foo-after');
	this.classList.toggle('foo-before');
	};
	</script>
	</body>
	</html>