I can't get image to display using Javascript

Question

Am working on a quiz where i need an image to show good or bad when i click submit, if the correct or wrong answers are chosen. But i keep getting only one image displayed.

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];

If an answer is correct, then the good1.png image should display at the right hand corner and if an answer is incorrect, the bad1.png image should display

Where are you calling getResult() and how are you sending the form? — fedesc
– fedesc, Commented Mar 20, 2019 at 19:00
There is a submit button with onclick = "getResult()". I didn't add it. — Barri
– Barri, Commented Mar 20, 2019 at 20:40

Hemant Parashar · Accepted Answer · 2019-03-20 19:12:00Z

2

You're using a src attribute on a div instead of an img tag which won't work. Also, use a generic class e.g question-img for common elements, in this case the img tag rather than using the same id for multiple elements which is a bad practice.

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

and use document.querySelector like to assign the src to the img element

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

Also your if (correct_ans === true) statement is always going to be false since you're comparing a number with a boolean.

Hope this helps !

edited Mar 20, 2019 at 19:12

answered Mar 20, 2019 at 19:06

Hemant Parashar

3,7842 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barri Over a year ago

Thanks a lot. It helped a lot. But if my correct_ans === 1 is always going to be false, how do i get it to work

Hemant Parashar Over a year ago

@Barri You can do something like if ( correct_ans > 0 ) (means we have 1 or more correct answer ) then do some stuff that you want.

Hemant Parashar Over a year ago

Do upvote and accept this as the answer if it helped :) Happy coding !

Ali Sheikhpour · Accepted Answer · 2019-03-20 19:15:04Z

1

There are multiple faults with your codes.

You have two questions but you are selecting the true if there is only 1 correct answer.
you have assigned src to div but it should be assigned to img.
the result of (correct_ans === true) is always false. Because three equal sign compares both values and types and a number type is never equal to boolan type.
You have multiple id of goodorbad and using ID selector, only selects the first occurance.

answered Mar 20, 2019 at 19:15

Ali Sheikhpour

11.4k5 gold badges53 silver badges100 bronze badges

Comments

kht · Accepted Answer · 2019-03-20 19:06:57Z

0

You cannot have multiple HTML elements with the same ID, they must be unique.

You should use classes and/or data-attributes if you want to select multiple elements at the same time.

answered Mar 20, 2019 at 19:06

kht

5902 silver badges8 bronze badges

Collectives™ on Stack Overflow

I can't get image to display using Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related