Odtnhj

I am trying to show a different image depending on the outcome of my JS app.

My HTML + JS looks as follows now.

 if (c == 2) 
 document.getElementById('result').innerHTML = num + ' is a Prime number';
 var imageshown = "OptimusPrime.gif"
 else
 document.getElementById('result').innerHTML = num + ' is NOT a Prime number';
 var imageshown = "Megatron.gif"
 
 } 
 </script>
<div class="container">
 <form id="contact" method="post">

 <h3>Prime-O-Tron</h3>
 <h4>Please fill in a number in the field below and press "Calculate" to see if it is a prime number or not.</h4>

 Please enter a number:
 <input type="number" id="num" name="num" min="0" />
 <input type="button" value="Find Prime Number" onclick="findPrime()" name="find" />
 <div style="margin-top: 10px;" id="result"></div>
 <img src= imageshown>

But it is not displaying any image, no matter if the outcome is from the if or the else.

How would I embed a different image based on the outcome of my JS ?

You can change the src instead of updating the variable's value. Also you might simplify like this:

 if (c == 2) 
 msg = num + ' is a Prime number';
 imageshown = "OptimusPrime.gif"
 else 
 msg = num + ' is NOT a Prime number';
 imageshown = "Megatron.gif"
 

 var result = document.getElementById('result');
 var img = result.nextElementSibling;

 result.textContent = msg;
 img.src = imageshown;
} // <--function closing

try this,

html

 <img id='img' src= imageshown>

javascript

if (c == 2) 
 document.getElementById('result').innerHTML = num + ' is a Prime number';
 var imageshown = "OptimusPrime.gif"
 else 
 document.getElementById('result').innerHTML = num + ' is NOT a Prime number';
 var imageshown = "Megatron.gif"


document.getElementById('img').src = imageshown;