I’m trying to make a select option dropdown in javascript and write it in HTML. The options are placed in an object in javascript (under “valg”). I have tried different solutions but, I can’t get it to work properly. Do you have any ideas?
The code is here:
The code is here:
let produkter = [
{
navn: 'Eple',
pris: 20,
beskrivelse: 'Smakfullt og sunt.',
bilde: '<img id="bilde" src="../bilder/iphone.jpeg">',
valg: ['Grønt', 'Rødt', 'Gult'],
antall: 0
},
{
navn: 'Banan',
pris: 15,
beskrivelse: 'Gult og kult.',
bilde: '<img id="bilde" src="../bilder/iphone.jpeg">',
valg: ['Små', 'Store'],
antall: 0
},
{
navn: 'Pære',
pris: 12,
beskrivelse: 'Alltid en pære til lunsj.',
bilde: '<img id="bilde" src="../bilder/iphone.jpeg">',
valg: ['Små', 'Store'],
antall: 0
},
{
navn: 'Sitron',
pris: 14,
beskrivelse: 'Sitron er godt.',
bilde: '<img id="bilde" src="../bilder/iphone.jpeg">',
valg: ['Moden', 'Ikke moden'],
antall: 0
}
]
for (var i = 0; i < produkter.length; i++) {
let bodyEl = document.querySelector("body");
bodyEl.id = "bodydiv";
let hovedEl = document.createElement("div");
hovedEl.id = "hoved";
bodyEl.appendChild(hovedEl);
let h2El = document.createElement("h2");
h2El.id = "navn"
h2El.innerHTML = produkter[i].navn;
hovedEl.appendChild(h2El);
let bildeEl = document.createElement("p");
bildeEl.innerHTML = produkter[i].bilde;
hovedEl.appendChild(bildeEl);
let avsnittEl = document.createElement("p");
avsnittEl.id = "beskrivelse";
avsnittEl.innerHTML = produkter[i].beskrivelse;
hovedEl.appendChild(avsnittEl);
let prisEl = document.createElement("p");
prisEl.innerHTML = 'kr. ' + produkter[i].pris;
hovedEl.appendChild(prisEl);
let antallEl = document.createElement("input");
antallEl.type = "number";
antallEl.id = "antall"
hovedEl.appendChild(antallEl);
let knappEl = document.createElement("button");
knappEl.innerHTML = "Kjøp";
knappEl.id = "knapp";
hovedEl.appendChild(knappEl);
knappEl.onclick = function() {
alert('Knapp er trykket på');
}
// Here I'm trying to make the select option dropdown
let flervalgEl = document.createElement("select");
flervalgEl.innerHTML = produkter[i].valg;
hovedEl.appendChild(flervalgEl);
let valgAltEl = document.createElement("option");
valgAltEl.innerHTML = produkter[i].valg[i];
flervalgEl.appendChild(valgAltEl);
}
It’s the last part of the code that I’m struggling with. Under the comment.