Javascript kan op verschillende manieren input ontvangen:
Javascript gebuikt events om te reageren op HTML knoppen. Meer hierover kun je lezen in het hoofdstuk "Javascript-Events".
Naast knoppen kun je ook de inhoud van HTML input velden uitlezen en verwerken. Om toegang te krijgen tot een HTML-element, gebruiken we weer de document.getElementById(id)
methode.
Het id-attribuut definieert het HTML-element. De value-eigenschap definieert de HTML-inhoud:
Hieronder een voorbeeld om te testen:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Demo</h1>
<input type="text" name="demo1" id="demo1" value="hello"> <br>
<input type="checkbox" name="demo2" id="demo2" checked> <br>
<input type="date" name="demo3" id="demo3" value="2020-11-05"> <br>
<br>
<br>
<script>
var data = document.getElementById("demo1").value;
document.write(data+"<br>");
data = document.getElementById("demo2").checked;
document.write(data+"<br>");
data = document.getElementById("demo3").value;
document.write(data+"<br>");
</script>
</body>
</html>
Meer HTML input elementen kun je vinden op de volgende pagina: https://www.w3schools.com/html/html_form_input_types.asp
Het vullen van HTML input elementen met een waarde gaat als volgt:
voorbeeld:
document.getElementById("demo1").value = "hello";
document.getElementById("demo2").checked = false;
document.getElementById("demo3").value = "2020-11-05";
Naast input velden is het ook mogelijk om input te vragen via een popup. Deze methode wordt niet vaak gebruikt aangezien dit vaak niet als gebruikersvriendelijk wordt ervaren.
voorbeeld:
var name = window.prompt("Enter your name: ");