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
– Teemu, Commented Mar 23, 2017 at 13:03
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Cruiser
– Cruiser, Commented Mar 23, 2017 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
– Daniel Rasmussen, Commented Mar 23, 2017 at 13:05
Possible duplicate of Toggle image src attribute using Javascript — bhansa
– bhansa, Commented Mar 23, 2017 at 13:06
What is img supposed to represent in img src="Site/assets/HappyObama.jpg"? — Teemu
– Teemu, Commented Mar 23, 2017 at 13:06

Richardson. M · Accepted Answer · 2017-03-23 13:15:21Z

-1

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>

answered Mar 23, 2017 at 13:15

Richardson. M

9422 gold badges17 silver badges31 bronze badges

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

Comments

SteveHoutmeyers · Accepted Answer · 2017-03-23 13:27:04Z

-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, 2017 at 13:27

answered Mar 23, 2017 at 13:10

SteveHoutmeyers

234 bronze badges

Comments

Navjot Singh · Accepted Answer · 2017-03-23 13:34:29Z

-2

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

answered Mar 23, 2017 at 13:34

Navjot Singh

172 bronze badges

Comments

Richardson. M · Accepted Answer · 2017-03-23 13:05:31Z

-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, 2017 at 13:05

Richardson. M

9422 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

changing image with javascript within if/else

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related