How to show images with for loops?

Question

What I'm really trying to do is create a web page for a booking page, where you can rent cabins. But there are only some periods that the cabins are vacant, so I want to find which one is available at the different periods. What I succeeded was to get information for the different cabins, but I'm struggling to get the picture forward.

 var ferie = document.getElementById("ferie") var parUt = document.getElementById("parUt") var bilde = document.getElementById("bilde") var hytter = [{ navn: "Granstua", sengeplasser: 4, standard: "høy", badstue: "Ja", ukepris: "12 000 kr", enLedig: "Påske", bilde: "granstua.jpg" }, { navn: "Granbo", sengeplasser: 6, standard: "Middels", badstue: "Nei", ukepris: "15 000 kr", ledig: "VinterFerie", enLedig: "Jul", bilde: "granbo.jpg" }, { navn: "Granhaug", sengeplasser: 10, standard: "Høy", badstue: "Ja", ukepris: "30 000 kr", ledig: "VinterFerie", bilde: "granhaug.jpg" } ] function ledigSjekk() { var periode = ferie.value var tekstUt = "oversikt over alle hyttene som er tilgjgenlig<br>" for (var i = 0; i < hytter.length; i++) { if (periode == hytter[i].ledig) { tekstUt += "<br>hytteNavn:" + hytter[i].navn tekstUt += "<br>sengeplasser:" + hytter[i].sengeplasser tekstUt += "<br>standard:" + hytter[i].standard tekstUt += "<br>badstue:" + hytter[i].badstue tekstUt += "<br>ukepris" + hytter[i].ukepris + "<hr>" bilde.src = hytter[i].bilde } else if (periode == hytter[i].enLedig) { tekstUt += "<br>hytteNavn:" + hytter[i].navn tekstUt += "<br>sengeplasser:" + hytter[i].sengeplasser tekstUt += "<br>standard:" + hytter[i].standard tekstUt += "<br>badstue:" + hytter[i].badstue tekstUt += "<br>ukepris" + hytter[i].ukepris bilde.src = hytter[i].bilde } } parUt.innerHTML = tekstUt } 

 <select class="" name="" id="ferie"> <option>Jul</option> <option>VinterFerie</option> <option>Påske</option> </select> <button type="button" onclick="ledigSjekk()" name="button">Sjekk hvilken som er ledig</button> <p id="parUt"></p> <img src="" id="bilde" alt=""> 

Answer 1

You can use gridster.js or just refer to similar previously asked questions that have been answered.

Displaying multiple images dynamically with Javascript or jquery

Displaying multiple images with an ajax response