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标签，而不要对多个元素使用相同的id，这是一个不好的做法。

<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个正确答案，您将选择true。
您已将src分配给div，但应将其分配给img。
（{correct_ans === true）的结果始终为假。因为三个等号会同时比较值和类型，而数字类型永远不会等于布尔型。
您有多个goodorbad的ID，并且使用ID选择器，仅选择了第一个匹配项。

Answer 3

您不能有多个具有相同ID的HTML元素，它们必须是唯一的。

如果要同时选择多个元素，则应使用classes和/或数据属性。

我无法使用JavaScript显示图像

3 个答案: