Jaar 4 - Module 2 - Les 7: Meer muisinteractie
Leren hoe websites werken
Wat het verschil is tussen server & client software
Leren hoe websites werken
Wat het verschil is tussen server & client software
Zelf een website maken met Python, HTML & Javascript
Voor jezelf, of voor een eigen klant
Leren hoe JavaScript werkt
Leren hoe JavaScript werkt
Een memory game maken met JavaScript
Leren hoe JavaScript werkt
Een memory game maken met JavaScript
JavaScript toepassen op je eigen website
interactiviteit op andere dingen dan knoppen
We hebben al gezien dat je een eventListener aan een knop kan koppelen.
We hebben al gezien dat je een eventListener aan een knop kan koppelen.
let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);
function groet(){
par.innerHTML = "Je hebt geklikt op de knop!";
}We hebben al gezien dat je een eventListener aan een knop kan koppelen.
let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);
function groet(){
par.innerHTML = "Je hebt geklikt op de knop!";
}Zoek de knop op
We hebben al gezien dat je een eventListener aan een knop kan koppelen.
let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);
function groet(){
par.innerHTML = "Je hebt geklikt op de knop!";
}Hangt functie groet eraan
We hebben al gezien dat je een eventListener aan een knop kan koppelen.
let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);
function groet(){
par.innerHTML = "Je hebt geklikt op de knop!";
}Hangt functie groet eraan
Let op!
Zonder haakjes!
We hebben al gezien dat je een eventListener aan een knop kan koppelen.
let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);
function groet(){
par.innerHTML = "Je hebt geklikt op de knop!";
}De functie groet
We hebben al gezien dat je een eventListener aan een knop kan koppelen.
let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);
function groet(){
par.innerHTML = "Je hebt geklikt op de knop!";
}De functie groet
Hier wel met haakjes ().
Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
<body>
<p id="par1">Klik eens op dit blok!</p>
<script src="index.js"></script>
</body>Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
} <body>
<p id="par1">Klik eens op dit blok!</p>
<script src="index.js"></script>
</body>Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Zoekt par1 op
<body>
<p id="par1">Klik eens op dit blok!</p>
<script src="index.js"></script>
</body>Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Zoekt par1 op
<body>
<p id="par1">Klik eens op dit blok!</p>
<script src="index.js"></script>
</body>Dat is een <p>
Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Hangt functie veranderKleur eraan
Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Deze functie dus!
Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Wat doet deze functie?
Er zijn ook andere listeners dan "click", bijv mouseover.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Er zijn ook andere listeners dan "click", bijv mouseover.
var index = 0;
let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("mouseover", veranderKleur);
let kleuren = ["yellow", "red", "green", "blue", "grey"];
function veranderKleur() {
paragraaf1.style.background = kleuren[index];
index += 1;
}Alleen dit verandert