Het If-statement

Maak een webapp met een textfield en een knop.

www x 
<form id="formulier">
	<label class="formTitle">Geef een getal:</label><br>
	<input type="text" id="tekstveldGetal" placeholder="0">
</form>

<a id="knopGetal" href="#">Knop</a>

<div id="paginaText"></div>

If-statement

Voeg deze JavaScript code toe om een bericht te tonen als het getal 0 is.

www x 
document.getElementById("knopGetal").addEventListener("click", function () {

	// haal de waarde uit het tekstveld
	let getal = document.getElementById("tekstveldGetal").value;
	console.log(getal);

	// als het getal 0 is, tonen we een bericht op de pagina
	if (getal == 0) {
		document.getElementById("paginaText").innerHTML += "Het getal is 0!";
	}
});

If-else-statement

Als het getal 0 is, tonen we een bericht op de pagina, zo niet tonen we een ander bericht.

www x
www x 
document.getElementById("knopGetal").addEventListener("click", function () {

	// haal de waarde uit het tekstveld
	let getal = document.getElementById("tekstveldGetal").value;
	console.log(getal);

	// als het getal 0 is, tonen we een bericht op de pagina
	// zo niet tonen we een ander bericht
	if (getal == 0) {
		document.getElementById("paginaText").innerHTML += "Het getal is 0!";
	} else {
		document.getElementById("paginaText").innerHTML += "Het getal is niet 0! <br>";
	}
});

If-else-if-statement

Als het getal 0 is, tonen we “Het getal is 0!”.
Als het getal groter dan 0 is, tonen we “Het getal is POSITIEF!”.
Zo niet tonen we “Het getal is NEGATIEF!””

www x
www x
www x 
document.getElementById("knopGetal").addEventListener("click", function () {

	// haal de waarde uit het tekstveld
	let getal = document.getElementById("tekstveldGetal").value;
	console.log(getal);

	// als het getal 0 is, tonen we "Het getal is 0!"
	// als het getal groter dan 0 is, tonen we "Het getal is POSITIEF!"
	// zo niet tonen we "Het getal is NEGATIEF!""
	if (getal == 0) {
		document.getElementById("paginaText").innerHTML = "Het getal is 0!";
	} else if (getal > 0) {
		document.getElementById("paginaText").innerHTML = "Het getal is POSITIEF";
	} else {
		document.getElementById("paginaText").innerHTML = "Het getal is NEGATIEF";
	}
});

Code optimaliseren

Momenteel doen we 3 keer document.getElementById("paginaText").innerHTML, elke keer dat we deze code uitvoeren kost dit een beetje tijd en computer resources.

We kunnen onze code optimaliseren, en onze webapp sneller maker door dit maar 1 keer uit te voeren en op te slaan in een variable:
let tekst = document.getElementById("paginaText")

Onze code ziet er dan als volgt uit:

document.getElementById("knopGetal").addEventListener("click", function () {

	// haal de waarde uit het tekstveld
	let getal = document.getElementById("tekstveldGetal").value;
	console.log(getal);

	// de <div> opslaan in een variabele
	let tekst = document.getElementById("paginaText");

	// if-statement
	if (getal == 0) {
		tekst.innerHTML = "Het getal is 0!";
	} else if (getal > 0) {
		tekst.innerHTML = "Het getal is POSITIEF";
	} else {
		tekst.innerHTML = "Het getal is NEGATIEF";
	}
});

InnerHTML met HTML-tags

We kunnen via de .innerHTML methode ook HTML-code toevoegen aan de pagina.

www x 
document.getElementById("knopGetal").addEventListener("click", function () {

	let getal = document.getElementById("tekstveldGetal").value;
	console.log(getal);

	let tekst = document.getElementById("paginaText");

	if (getal == 0) {
		tekst.innerHTML += "Het getal is 0! <br>";
	} else if (getal > 0) {
		tekst.innerHTML += "Het getal is <strong>POSITIEF</strong> <br>";
	} else {
		tekst.innerHTML += "Het getal is <strong>NEGATIEF</strong> <br>";
	}

});
Last edited: 03/09/2025
Created: 05/06/2024