<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//als pagina laad
window.onload = function(){
document.getElementById('korting').addEventListener('click', check);
check();
}
function check(){
//als korting is aangeklikt
if(document.getElementById('korting').checked){
//laat tabel met id naam kortingen zien
document.getElementById('kortingen').style.display ='block';
}
else{
//laat tabel met id naam kortingen niet zien
document.getElementById('kortingen').style.display ='none';
}
}
</script>
</head>
<body>
<!--form in html maken-->
<form action="" method="post">
<div><span>voornaam </span><input type= "text" name= "voornaam"></input></div>
<div><span>achternaam </span><input type= "text" name= "achternaam"></input></div>
<div><span>productnaam </span><input type = "text" name = "productnaam"></input></div>
<!--checkbox maken met een id zodat in js gevonden kan worden via getelementbyid-->
<div>kortingscode? <input type = "checkbox" name = "korting" id = "korting"></input></div>
<!--nog een aparte id maken zodat in js gevonden kan worden als id van korting gechecked is-->
<div id = "kortingen"><div><span>code </span><input type = "text" name = "kortingscode"></input></div>
</form>
</body>
</html>