Я не могу получить изображение для отображения с помощью Javascript

Question

Я работаю над тестом, где мне нужно изображение, чтобы показать хорошее или плохое, когда я нажимаю кнопку отправить, если выбраны правильные или неправильные ответы. Но я продолжаю получать только одно изображение.

HTML

<div class = "question1">
       <p>What is the capital of Nigeria?</p>
       <input type = "text" id = "question_one">
       <div id = "goodorbad"></div>

   </div>

   <div class = "question2">
       <p>Which of these is the symbol for 'plus'?</p>
       <select id = "operators">
           <option value = "x">x</option>
           <option value = "-">-</option>
           <option value = "+">+</option>
           <option value = "%">%</option>
       </select> 
       <div id = "goodorbad"></div>
   </div>

JAVASCRIPT

function getResult() {
let answer_one = document.getElementById("question_one").value;
let answer_two = document.getElementById("operators").value;
let correct_ans = 0;

if (answer_one === "abuja") {
    correct_ans++;

}

if (answer_two === "+") {
    correct_ans++;
} 


let sign_symbol = ["bad1.png" , "good1.png"];
let sign;



 if (correct_ans === true){
    sign = 1;
}
else{
    sign = 0;
} 

 document.getElementById("goodorbad").src = sign_symbol[sign];

Если ответ правильный, изображение good1.png должно отображаться в правом углу, а если ответ неправильный, изображение bad1.png должно отображать

Answer 1

Вы используете атрибут src для div вместо тега img, который не будет работать.Кроме того, используйте общий класс, например question-img для общих элементов, в этом случае тег img, а не один и тот же идентификатор для нескольких элементов, что является плохой практикой.

<div class = "question1">
   <p>What is the capital of Nigeria?</p>
   <input type = "text" id = "question_one">
   <img class="question-img" src=""/>
 </div>

и используйте document.querySelector какприсвоить src элементу img

 document.querySelector("#question1 .question-img").src = sign_symbol[sign];

Кроме того, ваш оператор if (correct_ans === true) всегда будет ложным, поскольку вы сравниваете число с логическим значением.

Надеюсь, это поможет!

Answer 2

В ваших кодах несколько ошибок.

1. У вас есть два вопроса, но вы выбираете истинный, если есть только 1 правильный ответ.
2. Вы назначили src на div, но его следует присвоить img.
3. результат (correct_ans === true) всегда ложен. Поскольку три знака равенства сравнивают значения и типы, а числовой тип никогда не равен булевому типу.
4. У вас есть несколько идентификаторов goodorbad, и с помощью селектора идентификаторов выбирается только первое вхождение.

Answer 3

Вы не можете иметь несколько элементов HTML с одинаковым идентификатором, они должны быть уникальными.

Вы должны использовать классы и / или атрибуты данных, если вы хотите выбрать несколько элементов одновременно.