changing image with javascript within if/else

Question

I am trying to change an image in my HTML, via an If/else statement, so the page displays an image depending on a value from another script i currently have this code

<script>
      if (b.className="yes") {
    img src="Site/assets/HappyObama.jpg"
} 
else {
    img src="Site/assets/SadObama.jpg"
}

how can i fix this? Is there something within Javascript that does this?

You're aware of the difference between assigning and comparing? — Teemu, Mar 23 '17 at 13:03
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators — Cruiser, Mar 23 '17 at 13:04
Because of the way the project is already build (with if/else statements above) i'd like to keep to that otherwise, can you suggest a function or something? — Daniel Rasmussen, Mar 23 '17 at 13:05
Possible duplicate of [Toggle image src attribute using Javascript](http://stackoverflow.com/questions/12225843/toggle-image-src-attribute-using-javascript) — bhansa, Mar 23 '17 at 13:06
What is `img` supposed to represent in `img src="Site/assets/HappyObama.jpg"`? — Teemu, Mar 23 '17 at 13:06

SteveHoutmeyers · Answer 1 · 2017-03-23T13:27:04.670

-1

Use a function to set the value for src.

function getImage(className) { 

    var image = "";
    if (className == 'yes') {
        image = "Site/assets/HappyObama.jpg"
    } 
    else {
        image = "Site/assets/SadObama.jpg"
    }  
    return image;
}

edited Mar 23 '17 at 13:27

answered Mar 23 '17 at 13:10

SteveHoutmeyers

23
4

score -1 · Answer 2 · answered Mar 23 '17 at 13:15

Here is working example

<!DOCTYPE html>
<html>
   <body>

     <p id="demo">Click the button to change the text in this paragraph.</p>
     <img id="img" src="#">

     <button onclick="myFunction()">Try it</button>

     <script>
     function myFunction() {
        document.getElementById("demo").innerHTML = "Hello World";
        var i = true;
        if(i) {
           document.getElementById("img").src = "https://www.w3schools.com/css/trolltunga.jpg";

        } else {
           document.getElementById("img").src = "http://wallpaper-         gallery.net/images/image/image-13.jpg";}
       }
    </script>

  </body>
 </html>

score -2 · Answer 3 · answered Mar 23 '17 at 13:34

Assign an id to your img tag, then you can

//First using jQuery    
     <script>
              if (b.className="yes") 
              {
                 $("#img").attr('src', 'Site/assets/HappyObama.jpg'); 
              } 
              else 
              {
                $("#img").attr('src', 'Site/assets/SadObama.jpg');
              }   
            </script>

//Second using javascript
 <script>
     if (b.className="yes") 
     {
        document.getElementById("img").src="Site/assets/HappyObama.jpg";
     } 
     else 
     {
          document.getElementById("img").src="Site/assets/SadObama.jpg";
     }   
 </script>

Lemme know if the problem resolved. Happy to help

score -5 · Answer 4 · answered Mar 23 '17 at 13:05

-5

You can do like this

if (b.className="yes") {
   document.getElementById("imageid").src="Site/assets/HappyObama.jpg";
} else {
   document.getElementById("imageid").src="Site/assets/SadObama.jpg";
}

answered Mar 23 '17 at 13:05

Richardson. M

852
2
17
28

changing image with javascript within if/else

4 Answers4