i have an assignment were i need to create a function that when i click a button it needs to generate a random amount of pictures
var addImgBtn = document.getElementById("add-img-btn");
var outputDiv = document.getElementById("output-div");
function addImg() {
outputDiv.innerHTML = `
<img src="img/mann.jpg"/>
`;
}
function addRandomImg() {
addImgBtn = Math.floor(Math.random() * 100 + 1);
}
addImgBtn.onclick = addImg;<input id="add-img-btn" type="button" value="Legg til bilde" />
<div id="output-div"></div>At some point you need to do some iteration to build up the HTML that contains all of the images.
Your onclick should be calling addRandomImg.
You should be assigning the result of the randomiser to a new variable, not addImgBtn.
Use a for...loop to iterate between 0 and rnd, and on each iteration push the image HTML into an array. Once all iterations are complete you can finally update outputDiv with that HTML making sure you join up the elements of the array into a string.
var addImgBtn = document.getElementById("add-img-btn");
var outputDiv = document.getElementById("output-div");
function addRandomImg() {
const rnd = addImgBtn = Math.floor(Math.random() * 100 + 1);
let html = [];
for (let i = 0; i <= rnd; i++) {
html.push('<img src="https://dummyimage.com/20x20/000/fff"/>');
}
outputDiv.innerHTML = html.join('');
}
addImgBtn.onclick = addRandomImg;img { margin: 2px 2px; }<input id="add-img-btn" type="button" value="Legg til bilde" />
<div id="output-div"></div>