J'essaie de réinitialiser les images à chaque fois que l'utilisateur modifie la liste déroulante. Le problème que j'ai en ce moment est que chaque fois que vous définissez la liste déroulante sur un nombre et que vous cliquez sur "Go", cela continue de générer une autre image en plus de la précédente.

Je veux que si quelqu'un sélectionne "1" dans la liste déroulante, puis sélectionne "5", les 5 images remplacent la précédente 1 que l'utilisateur a sélectionnée au lieu de conserver cette 1 image précédente qu'il a générée auparavant.

Toute aide serait grandement appréciée. Merci!

var answer = 0;
var counter = 0;

var pics = [
    "img/img1.jpg",
    "img/img2.jpg",
    "img/img3.jpg",
    "img/img4.jpg",
    "img/img5.jpg",
    "img/img6.jpg",
    "img/img7.jpg",
    "img/img8.jpg",
    "img/img9.jpg",
    "img/img10.jpg"
];

var descriptions = [
    "Image 1",
    "Image 2",
    "Image 3",
    "Image 4",
    "Image 5",
    "Image 6",
    "Image 7",
    "Image 8",
    "Image 9",
    "Image 10"
];


function quizcheck() {

    var answer = document.getElementById("question1").value;
    console.log("Dropdown value: " + answer);

    if (answer==0){
        counter++;
    }

    if (answer==1){
        counter++;
    }

    if (answer==2){
        counter++;
    }

    if (answer==3){
        counter++;
    }

    if (answer==4){
        counter++;
    }

    if (answer==5){
        counter++;
    }

    if (answer==6){
        counter++;
    }

    if (answer==7){
        counter++;
    }

    if (answer==8){
        counter++;
    }

    if (answer==9){
        counter++;
    }

    if (answer==10){
        counter++;
    }




if(answer == 1){
    for(i=0; i<1; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
    // document.getElementById("mainButton").onclick = null;
}
    }


if(answer == 2){
    for(i=0; i<2; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 3){
    for(i=0; i<3; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 4){
    for(i=0; i<4; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 5){
    for(i=0; i<5; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 6){
    for(i=0; i<6; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 7){
    for(i=0; i<7; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 8){
    for(i=0; i<8; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 9){
    for(i=0; i<9; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 10){
    for(i=0; i<10; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}

    }
}
<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Loops</title>

</head>

<body>

<br>

        <h3>Choose a number to determine how many images load in the gallery:
        <select id="question1">
            <option selected value="0">Choose an Answer</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <br>
        </h3>

<input type="button" id="mainButton" value="Load" onClick="quizcheck()"><br>

<section id="pics">
</section>

<p id="firstdisplay">
<p>
    
<script src="js/loop-gallery.js" type="text/javascript"></script>

</body>
</html>
1
Levi 12 nov. 2020 à 12:00

1 réponse

Meilleure réponse

Pour éviter les doublons, vous pouvez simplement ajouter un nettoyage du contenu de la balise avec ce code - document.getElementById("pics").InnerHTML=''; au début de la fonction quizcheck().

var answer = 0;
var counter = 0;

var pics = [
    "img/img1.jpg",
    "img/img2.jpg",
    "img/img3.jpg",
    "img/img4.jpg",
    "img/img5.jpg",
    "img/img6.jpg",
    "img/img7.jpg",
    "img/img8.jpg",
    "img/img9.jpg",
    "img/img10.jpg"
];

var descriptions = [
    "Image 1",
    "Image 2",
    "Image 3",
    "Image 4",
    "Image 5",
    "Image 6",
    "Image 7",
    "Image 8",
    "Image 9",
    "Image 10"
];


function quizcheck() {
    document.getElementById("pics").innerHTML = '';

    var answer = document.getElementById("question1").value;
    console.log("Dropdown value: " + answer);

    if (answer==0){
        counter++;
    }

    if (answer==1){
        counter++;
    }

    if (answer==2){
        counter++;
    }

    if (answer==3){
        counter++;
    }

    if (answer==4){
        counter++;
    }

    if (answer==5){
        counter++;
    }

    if (answer==6){
        counter++;
    }

    if (answer==7){
        counter++;
    }

    if (answer==8){
        counter++;
    }

    if (answer==9){
        counter++;
    }

    if (answer==10){
        counter++;
    }




if(answer == 1){
    for(i=0; i<1; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
    // document.getElementById("mainButton").onclick = null;
}
    }


if(answer == 2){
    for(i=0; i<2; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 3){
    for(i=0; i<3; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 4){
    for(i=0; i<4; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 5){
    for(i=0; i<5; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 6){
    for(i=0; i<6; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 7){
    for(i=0; i<7; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 8){
    for(i=0; i<8; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 9){
    for(i=0; i<9; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}
    }

if(answer == 10){
    for(i=0; i<10; i++){
    console.log("The loop has run " + (i+1) + " times");    
    document.getElementById("pics").innerHTML += "<figure><img src='" + pics[i] + "' ><figcaption>" +   descriptions[i] +   "</figcaption></figure>";
}

    }
}
<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Loops</title>

</head>

<body>

<br>

        <h3>Choose a number to determine how many images load in the gallery:
        <select id="question1">
            <option selected value="0">Choose an Answer</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <br>
        </h3>

<input type="button" id="mainButton" value="Load" onClick="quizcheck()"><br>

<section id="pics">
</section>

<p id="firstdisplay">
<p>
    
<script src="js/loop-gallery.js" type="text/javascript"></script>

</body>
</html>
1
s.kuznetsov 12 nov. 2020 à 09:42