Theo-denBlanken/nextSibling.html

## nextSibling.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Next sibling</title>
</head>
<body>
    <h1>Next sibling</h1>
    <button id="een">knop 1</button><p>Deze tekst kleuren met een click op knop 1. Tussen deze paragraaf en de knop zit GEEN spatie in de mark-up!</p>

    <button id="twee">knop 2</button>
    <p>Deze tekst kleuren met een click op knop 2. Deze paragraaf komt na de knop op een nieuwe regel in de mark-up en werkt niet met nextSibling!</p>

    <button id="drie">knop 3</button>
    <p>Deze tekst kleuren met een click op knop 3. Deze paragraaf komt na de knop op een nieuwe regel in de mark-up!</p>

    <script>
    maakRood = function() {
        this.nextSibling.style.color = 'red';
        this.style.color = 'red';
    }
    maakGroen = function() {
        this.nextSibling.nextSibling.style.color = 'green';
        this.style.color = 'green';
    }
    document.getElementById('een').addEventListener('click', maakRood);
    document.getElementById('twee').addEventListener('click', maakRood); // gaat een foutmelding geven
    document.getElementById('drie').addEventListener('click', maakGroen); // gaat een foutmelding geven
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Next sibling</title>
	</head>
	<body>
	<h1>Next sibling</h1>
	<button id="een">knop 1</button><p>Deze tekst kleuren met een click op knop 1. Tussen deze paragraaf en de knop zit GEEN spatie in de mark-up!</p>

	<button id="twee">knop 2</button>
	<p>Deze tekst kleuren met een click op knop 2. Deze paragraaf komt na de knop op een nieuwe regel in de mark-up en werkt niet met nextSibling!</p>

	<button id="drie">knop 3</button>
	<p>Deze tekst kleuren met een click op knop 3. Deze paragraaf komt na de knop op een nieuwe regel in de mark-up!</p>

	<script>
	maakRood = function() {
	this.nextSibling.style.color = 'red';
	this.style.color = 'red';
	}
	maakGroen = function() {
	this.nextSibling.nextSibling.style.color = 'green';
	this.style.color = 'green';
	}
	document.getElementById('een').addEventListener('click', maakRood);
	document.getElementById('twee').addEventListener('click', maakRood); // gaat een foutmelding geven
	document.getElementById('drie').addEventListener('click', maakGroen); // gaat een foutmelding geven
	</script>
	</body>
	</html>