JavaScript file name selector application, only selecting first element

March 9, 2022

JavaScript file name selector application, only selecting first element.

There are twelve images with a class of foto, each labelled step1.png, step2.png etc. When one of the images is clicked, the name of the image file should be displayed, less the png file extension. For example, step1.png become step1. It all works as expected but only ever displays the first file name no matter which image is clicked on. I would be very grateful for any clues to my error with this code.

<title>Photo Files</title>
    <style>
      .box {
        margin: auto;
        width: 200px;

        background-color: lightgray;
      }
      .box p {
        color: green;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Selects image file name</h1>
    <div class="box">
      <img class="foto" src="images/step1.png" alt="" />
      <img class="foto" src="images/step2.png" alt="" />
      <img class="foto" src="images/step3.png" alt="" />
      <img class="foto" src="images/step4.png" alt="" />
      <img class="foto" src="images/step5.png" alt="" />
      <img class="foto" src="images/step6.png" alt="" />
      <img class="foto" src="images/step7.png" alt="" />
      <img class="foto" src="images/step8.png" alt="" />
      <img class="foto" src="images/step9.png" alt="" />
      <img class="foto" src="images/step10.png" alt="" />
      <img class="foto" src="images/step11.png" alt="" />
      <img class="foto" src="images/step12.png" alt="" />

      <p class="picName">Name of file:</p>
      <br />
      <hr />
    </div>

    <script>
      var pic = document.querySelectorAll(".foto");
      for (var i = 0; i < pic.length; i++) {
        pic[i].addEventListener(
          "click",
          function () {
            var fullPath = document.querySelector(".foto").src;

           
            var filename = fullPath.replace(/^.*[\\\/]/, "");

            
            document.querySelector(".picName").textContent =
             
              "File name:" + filename.substring(0, filename.lastIndexOf(".")) ||
              filename;
          },
          false
        );
      }
    </script>
  </body>
</html>

>Solution :

your issue come from the line

 var fullPath = document.querySelector(".foto").src

that return only the first element that match selector .foto

to solve your issue recover image clicked by :

pass an event parameter to your function
recover target clicked with var target = e.target || e.srcElement;

but instead have 12 eventListeners it’s better to have only one on parent element of all your clicked image (in your sample .box but you can create a parent one box-pic in my below sample)

var box = document.querySelector(".box-pic");

box.addEventListener('click', function(e) {
  var target = e.target || e.srcElement;
  if (target.src) {
      var filename = target.src.replace(/^.*[\\\/]/, "");
      document.querySelector(".picName").textContent = "File name:" + filename.substring(0, filename.lastIndexOf(".")) ||
        filename;
  }
});

.box {
  margin: auto;
  width: 200px;
  background-color: lightgray;
}

.box p {
  color: green;
  font-weight: bold;
}

<h1>Selects image file name</h1>
<div class="box">
  <div class="box-pic">
    <img class="foto" src="images/step1.png" alt="img1" />
    <img class="foto" src="images/step2.png" alt="img2" />
    <img class="foto" src="images/step3.png" alt="img3" />
    <img class="foto" src="images/step4.png" alt="img4" />
    <img class="foto" src="images/step5.png" alt="img5" />
    <img class="foto" src="images/step6.png" alt="img6" />
    <img class="foto" src="images/step7.png" alt="img7" />
    <img class="foto" src="images/step8.png" alt="img8" />
    <img class="foto" src="images/step9.png" alt="img9" />
    <img class="foto" src="images/step10.png" alt="img10" />
    <img class="foto" src="images/step11.png" alt="img11" />
    <img class="foto" src="images/step12.png" alt="img12" />
  </div>

  <p class="picName">Name of file:</p>
  <br />
  <hr />
</div>