Javascript Won’t replace image

My Js code below is a quiz game. Each question takes up a full page, which means we have to change all the content every time the user presses the next button.

My issue is, i can’t seem to get the image to switch to the next by fully replacing it. In my case the new images just go to the bottom of the first.

// Questions will be asked//
const Questions = [
 { id: 0, i: "images/trump.jpg", a: [{ text: "George Washington", isCorrect: false },  { text: "John Adams", isCorrect: false }, { text: "James Madison", isCorrect: false },  { text: "Donald John Trump", isCorrect: true } ] }, 
 { id: 1, i: "http://www.google.com/intl/en_com/images/logo_plain.png", a: [{ text: "Lampang", isCorrect: false, isSelected: false }, { text: "phuket", isCorrect: false }, { text: "Ayutthaya", isCorrect: false }, { text: "Bangkok", isCorrect: true } ] }, 
 { id: 2, i: "http://www.google.com/intl/en_com/images/logo_plain.png", a: [{ text: "surat", isCorrect: false }, { text: "vadodara", isCorrect: false }, { text: "gandhinagar", isCorrect: true }, { text: "rajkot", isCorrect: false } ] } 
]

// Set start//
var start = true;

// Iterate//
function iterate(id) {

  // Getting the result display section//
  var result = document.getElementsByClassName("result");
  result[0].innerText = "";

  //Adding an image//

  var img = document.createElement("img");
  img.src = Questions[id].i;
  var src = document.getElementById("image");
  src.appendChild(img);


  // Getting the options//
  const op1 = document.getElementById('op1');
  const op2 = document.getElementById('op2');
  const op3 = document.getElementById('op3');
  const op4 = document.getElementById('op4');


  // Providing option text//
  op1.innerText = Questions[id].a[0].text;
  op2.innerText = Questions[id].a[1].text;
  op3.innerText = Questions[id].a[2].text;
  op4.innerText = Questions[id].a[3].text;

  // Providing the true or false value to the options//
  op1.value = Questions[id].a[0].isCorrect;
  op2.value = Questions[id].a[1].isCorrect;
  op3.value = Questions[id].a[2].isCorrect;
  op4.value = Questions[id].a[3].isCorrect;

  var selected = "";

  // Show selection for op1//
  op1.addEventListener("click", () => {
    op1.style.backgroundColor = "lightgoldenrodyellow";
    op2.style.backgroundColor = "lightskyblue";
    op3.style.backgroundColor = "lightskyblue";
    op4.style.backgroundColor = "lightskyblue";
    selected = op1.value;
  })

  // Show selection for op2//
  op2.addEventListener("click", () => {
    op1.style.backgroundColor = "lightskyblue";
    op2.style.backgroundColor = "lightgoldenrodyellow";
    op3.style.backgroundColor = "lightskyblue";
    op4.style.backgroundColor = "lightskyblue";
    selected = op2.value;
  })

  // Show selection for op3//
  op3.addEventListener("click", () => {
    op1.style.backgroundColor = "lightskyblue";
    op2.style.backgroundColor = "lightskyblue";
    op3.style.backgroundColor = "lightgoldenrodyellow";
    op4.style.backgroundColor = "lightskyblue";
    selected = op3.value;
  })

  // Show selection for op4//
  op4.addEventListener("click", () => {
    op1.style.backgroundColor = "lightskyblue";
    op2.style.backgroundColor = "lightskyblue";
    op3.style.backgroundColor = "lightskyblue";
    op4.style.backgroundColor = "lightgoldenrodyellow";
    selected = op4.value;
  })

  // Grabbing the evaluate button//
  const evaluate = document.getElementsByClassName("evaluate");

  // Evaluate method//
  evaluate[0].addEventListener("click", () => {
    if (selected == "true") {
      result[0].innerHTML = "True";
      result[0].style.color = "green";
    } else {
      result[0].innerHTML = "False";
      result[0].style.color = "red";
    }
  })
}

if (start) {
  iterate("0");
}

// Next button and method//
const next = document.getElementsByClassName('next')[0];
var id = 0;


next.addEventListener("click", () => {

  setTimeout(() => {
    start = false;
    if (id < 2) {
      id++;
      iterate(id);
      console.log(id);

    }
  })


})

:root {
  --primary: #1D1D1F;
  --secondary: #858786;
  --erro: #FF5757;
  text-align: center;
  align-items: center;
  align-self: center;
  font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.column {
  justify-items: center;
  justify-content: center;
  float: left;
  width: 50%;
  justify-content: center;
}

.main-container {
  margin: 50px;
  border-radius: 20px;
  background-color: #F5F8FA;
}


/* Clear floats after the columns */

.main-container:after {
  content: "";
  display: table;
  clear: both;
}

.main-container img {
  width: 320px;
  height: 320px;
  border-radius: 20px;
  object-position: center;
  object-fit: cover;
}

.center-cropped img {
  border-radius: 2px;
  width: 50%;
  height: 50%;
  object-position: center;
  object-fit: cover;
}

.option-container {
  margin-top: 50%;
  margin-bottom: 50%;
  grid-column: 1;
  margin: 10px;
  padding: 5px;
  width: 100%;
  height: auto;
}

.quiz-image {
  margin: 10px;
  padding: 10px;
  width: 100%;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.option {
  border-radius: 10px;
  border-width: 0px;
  margin: 10px;
  padding: 10px;
  width: 50%;
  height: auto;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background-color: #1da1f2;
}

.option:hover {
  background-color: #e1e8ed;
}

.title h1 {
  font-size: 4rem;
  font-weight: 400;
  padding: 10px;
  color: #1d1d1d;
}

.title h2 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #1D1D1D;
}

h2 {
  font-size: 3rem;
  font-weight: 300;
  color: #1D1D1D;
}

.question-container {
  margin: 10px;
  padding: 5px;
  width: 80vw;
  height: 10vh;
  background-color: #c7dddf;
  font-size: x-large;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
  <h1>Guess The President</h1>
</div>
<div class="main-container" &nbsp;>
  <div class="result"></div>
  <div class="column">
    <div class="quiz-image" id="image"></div>
  </div>
  <div class="column">
    <div class="option-container">
      <button class="option" onclick="" id="op1">option1</button>
      <button class="option" id="op2">option2</button>
      <button class="option" id="op3">option3</button>
      <button class="option" id="op4">option4</button>
    </div>
  </div>
</div>
<div class="navigation">
  <button class="evaluate">Evaluate</button>
  <button class="next">Next</button>
</div>

Answer

Where you have your

src.appendChild(img);

Change it to this:

src.innerHTML = "";
src.appendChild(img);

This will clear out the previous image and the new one will be added in.

Hope this helps.

Advertisement

Answer