Show text from alt under a Img on click-CodePudding

I want to make a function which can show the alt of an image.

I'm using bootstrap and made a function which displays an image when I click on the thumbnail. But I want it also to print or show the alt below the image when I click on the thumbnail.

I'll try my best but if you guys can help me out, I'd be really grateful!

Here is my code:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  //imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

.expandedImg .img {
  max-width: 150px;
}

.thumbnailContainer {
  overflow-y: none;
  width: 180px;
  height: 40vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<!--START Sidebar -->
<div >
  <div >

    <!--Thumbnail START-->
    <div >
      <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE"  style="max-width:140px;" onclick="myFunction(this);">
    </div>
    <!--Thumbnail END-->

  </div>


  <div >
    <!--main content-->
    <div >
      <span onclick="this.parentElement.style.display='none'"></span>
      <img  id="expandedImg" src="PLACEHOLDER IMG">
      <div>
        <!--here the caption/text below the image shown after a click-->
      </div>
    </div>

Thanks in advance for you guys!

CodePudding user response：

As imvain2 suggested in the comments, you just need to add the id to the div and uncomment the imgText.innerHTML = imgs.alt; line and it should work.

function myFunction(imgs) {
    var expandImg = document.getElementById("expandedImg");
    var imgText = document.getElementById("imgtext");
    expandImg.src = imgs.src;
    imgText.innerHTML = imgs.alt;
    expandImg.parentElement.style.display = "block";
}

.expandedImg .img {
  max-width: 150px;
}

.thumbnailContainer {
  overflow-y: none;
  width: 180px;
  height: 40vh;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>


  <!--START Sidebar -->
  <div >
      <div >

          <!--Thumbnail START-->
          <div >
              <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE"
                   style="max-width:140px;"
                  onclick="myFunction(this);">
          </div>
          <!--Thumbnail END-->

      </div>


      <div >
          <!--main content-->
          <div >
              <span onclick="this.parentElement.style.display='none'"></span>
              <img  id="expandedImg" src="PLACEHOLDER IMG">
              <div id="imgtext">
                  <!--here the caption/text below the image shown after a click-->
              </div>
          </div>
      </div>
  </div>

CodePudding user response：

I was actually able to create it without using the id - since you're passing "this" to your function, all you need to do is create a new element and do img.parentNode.insertBefore(newNode, img.nextSibling);. That being said, it might be better to add an id instead. Here's a working example:

function showAlt(imgNode) {
    const altNode = document.createElement("p");
  altNode.innerHTML = imgNode.alt;
  
    imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body>
  <section >
  <div >
      <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE"  style="max-width:140px;" onclick="showAlt(this);">
    </div>
  </section>
  </body>
</html>

and in case you want to play with the code a bit, here's a JSFiddle - https://jsfiddle.net/AJax201222/6dz18hwa/13/