I'm doing an assignment for an introduction to javascript course for school. My concept is a plant that grows when you give it water and becomes smaller when it doesn't get water after x amount of time. Adding water to the plant to make it grow works, but I'm having a harder time figuring out how to make it shrink over x amount of time. I was told to put it in a loop and then add setInterval but I'm a noob so i don't really know what to do. Also, the code is in dutch!
Thank you for taking the time to help me!!
HTML
<html lang="nl"> <head> <meta charset="UTF-8"> <title>Hulp of geen hulp. Dat is de vraag.</title> <link rel="stylesheet" href="_css/stijl.css"> </head> <body> <header> <h1>Help aan/uit.</h1> </header> <section> <p>Wil je weten hoe het werkt? Klik dan op de HELP NU! button.</p> <button id='helpbutton1'>HELP NU!</button> <div class='helptekst' id='helptekst1' hidden> <button class='wegkruisje' id='wegkruisje1'>X</button> <p>Zo dus: <br> Je klikt op de helpbutton voor hulp. En als je weet hoe het werkt, kan je de hulp weer wegklikken met het kruisje in de rechter bovenhoek.</p> </div> </section> <footer> <p>en onderaan staat ook iets.</p> </footer> <script src='_js/script.js'></script> </body> </html>
JAVASCRIPT:
console.log('Hier wordt water gegeven. '); //afbeeldingen var waterGieters = ['0ml.png','500ml.png', '1000ml.png', '1500ml.png', '2000ml.png']; var plantGroei = ['plant-baby.png', 'plant-peuter.png', 'plant-kind.png', 'plant-tiener.png', 'plant-volwassen.png']; // declaratie DOM elementen var gieterImg = document.querySelector ('#waterGieter'); var plantenImg = document.querySelector ('#planten'); var buitenImg = document.querySelector ('#buiten'); var waterButton = document.querySelector ('#toevoegenWater'); var dagButton = document.querySelector ('#maakDag'); var nachtButton = document.querySelector ('#maakNacht'); var bodyElement = document.querySelector ('body'); var groei = 0 ; //initieel waarde van groei op 0 // Als waterButton geklikt wordt, gaat de plant groeien en watergieter met water vullen. Plaatsjes wordt aangepast per klik. function groeiPlant() { console.log(groei); //if(groei<0) { // groei = 0 ;} if(groei>=plantGroei.length -1) { waterButton.hidden = true ;} gieterImg.src = 'images/' + waterGieters[ groei ]; plantenImg.src = 'images/' + plantGroei[ groei ]; } // eventHandler functies function geefWater() { groei = groei + 1 ; groeiPlant(); } //Functions om naar dag of nacht te veranderen doormiddel van een button function maakDag (event) { console.log('het is dag'); buitenImg.src = 'css/dag.png'; bodyElement.classList.remove('nacht');} function maakNacht (event) { console.log('het is nacht'); buitenImg.src = 'css/nacht.png'; bodyElement.classList.add('nacht');} //eventListener toevoegen aan DOM element waterButton.addEventListener('click', geefWater); waterButton.addEventListener('click', groeiPlant); nachtButton.addEventListener('click', maakNacht); dagButton.addEventListener('click', maakDag); 
