CODEWITHSUNDEEP
javascripthtml
Jwaldon
Jwaldon

Reputation: 45

Show and image when button selected

Having so much trouble with something I feel like should be easy. I am supposed to have a page with three buttons. Labeled 1, 2, and 3. When you click one you see an image. Different image for each button.

Any thoughts or suggestions appreciated. I am pretty new to this and have been at this simple task for hours. Thanks! 

<!DOCTYPE html> <html lang = "en"> 
<head> <title> Assignment 6.5.html </title>
<meta charset = "utf-8" /> 
<head>
<!-- Script for the event handler -->

</head>
<body>
    <button onclick= "showImage();" type="button" value='1' id='cat'> 1 </button>
    <button onclick= "showImage();" type="button" value='2' id='dog'> 2 </button>
    <button onclick= "showImage();" type="button" value='1' id='werewolf'> 3 </button>
    
    <img src="data:," alt>

    <script>

            function showImage(event)
            {
                if (document.getElementById("cat").src == "Cat1.jpg") 
                {   
                 if (document.getElementById("dog").src == "dog2.jpg")
                {                    
                if (document.getElementById("werewolf").src == "werewolf3.jpg")
            }
            
        </script>
    </body>

</html>
<!DOCTYPE.html> <html lang = "en"> 
<head> <title> Assignment 6.5.html </title>
<meta charset = "utf-8" /> 
<head>
<!-- Script for the event handler -->

<head>
<body>
    <button onclick= "showImage();" type="button" value='1' id='cat'> 1 </button>
    <button onclick= "showImage();" type="button" value='2' id='dog'> 2 </button>
    <button onclick= "showImage();" type="button" value='1' id='werewolf'> 3 </button>

     
<p>
    <script>

            function showImage()
            {
                if (document.getElementById("cat").src == "Cat1.jpg") 
                {   
                 if (document.getElementById("dog").scr == "dog2.jpg")
                {                    
                if (document.getElementById("werewolf").scr == "werewolf3.jpg")
            }
            
        </script>
</p>
    </body>

</html>

Upvotes: 1

Views: 1900

Answers (4)

kol
kol

Reputation: 28688

First, you should get the HTML elements as JavaScript variables. You can use getElementById for this (although querySelector is more flexible). You should pass the event object to showImage and check event.target to determine which button was clicked. Depending on the button, you can set the src of the image element, like this:

<button onclick= "showImage(event);" id="cat">1</button>
<button onclick= "showImage(event);" id="dog">2</button>
<button onclick= "showImage(event);" id="werewolf">3</button>
<img id="animal" />
<script>
  catButton = document.getElementById("cat");
  dogButton = document.getElementById("dog");
  werewolfButton = document.getElementById("werewolf");
  img = document.getElementById("animal");

  function showImage(event) {
    if (event.target == catButton) {
      img.src = "cat.jpg"
    } if (event.target == dogButton) {
      img.src = "dog.jpg"
    } if (event.target == werewolfButton) {
      img.src = "werewolf.jpg"
    }
  }
</script>

Upvotes: 0

aga-kesik
aga-kesik

Reputation: 11

here is life answer

<!DOCTYPE html>
<html>
  <head>
    <title> Assignment 6.5.html </title>
    <meta charset = "utf-8" /> 
  </head>
  <body>

    <div>
      <button onclick= "showImage(this.id)" id="cat"> 1 </button>
      <button onclick= "showImage(this.id);" id='dog'> 2 </button>
      <button onclick= "showImage(this.id);" id='werewolf'> 3 </button>
    </div>
    <img id="myImg" src="">

    <script>
    function showImage(object) {
      let src = ""
      if (object == "cat") {
        src = "path/to/img"
      } else if (object == "dog") {
        src = "path/to/img"
      } else if (object == "werewolf") {
        src = "path/to/img"
      }
      document.getElementById("myImg").src = src;
    }
    </script>

  </body>
</html>

Upvotes: 0

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

You had some faulty tags so I fixed that as well. Commented that in the code.

You can send in parameters in your function call, which contains the link to the image - either relative or absolute paths. In my example, I got absolute paths.

#image {
  border: 2px solid #000;
}
<!DOCTYPE html>
<html lang = "en"> 
<head> <title> Assignment 6.5.html </title>
<meta charset = "utf-8" /> 
<!-- <head> you should only have one head -->

<!-- <head> Missing slash --> 
</head>

<body>
    <div>
        <button onclick="showImage('https://picsum.photos/200/300')" type="button"> 1 </button>
        <button onclick="showImage('https://picsum.photos/300/100')" type="button"> 2 </button>
        <button onclick="showImage('https://picsum.photos/50/50')" type="button"> 3 </button>
    </div>

    <img src="" id="image"> <!-- added an image tag -->
     
</body>


<script>

    function showImage(imageSrc)
    {
      let imageElement = document.getElementById("image");

      if (imageElement) { // check that the image exists
        imageElement.src = imageSrc;
      }
    }

</script>
</html>

Upvotes: 0

apena
apena

Reputation: 2321

Think out the requirement a little further. I assume you want to display the image on it's own rather than inside each respective button. The src attribute of button replaces the button with the image. You need actually need a dedicated area to display the image. You also should probably decide if you want to load all the images up front and then show the relevant one and hide the others on each click or simply load the relevant image in the designated area on-the fly. The below code will load the relevant image on-the-fly when the button is clicked. If the images are different sizes you would need to adjust the height and width of 'display-area' on each click.

HTML

<img id="display-area" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" width="500" height="500"/>
<button id='cat' onclick="showImage(this);"> 1 </button>
<button id='dog' onclick="showImage(this);"> 2 </button>
<button id='werewolf' onclick="showImage(this);"> 3 </button>

JavaScript

function showImage(button) {
  let urls = {
    cat: 'https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=animal-pet-cute-kitten-45201.jpg&fm=jpg',
    dog: 'https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80',
    werewolf: 'https://upload.wikimedia.org/wikipedia/commons/6/6a/Werwolf.png'
  };
  let img = document.getElementById('display-area');
  img.src = urls[button.id]
}

Upvotes: 1

Related Questions