Aplicación de selector de nombre de archivo JavaScript, solo seleccionando el primer elemento.
Hay doce imágenes con una clase de foto, cada una etiquetada como paso1.png, paso2.png, etc. Cuando se hace clic en una de las imágenes, debe mostrarse el nombre del archivo de imagen, menos la extensión de archivo png. Por ejemplo, paso1.png se convierte en paso1. Todo funciona como se esperaba, pero solo muestra el primer nombre de archivo sin importar en qué imagen se haga clic. Estaría muy agradecido por cualquier pista de mi error con este código.
<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>tu problema viene de la línea
var fullPath = document.querySelector(".foto").srcque devuelven solo el primer elemento que coincide con selector .foto
para resolver su problema, recupere la imagen en la que hizo clic:
var target = e.target || e.srcElement;pero en lugar de tener 12 eventListeners, es mejor tener solo uno en el elemento principal de todas las imágenes en las que se hizo clic (en su cuadro de muestra, pero puede crear una imagen de cuadro principal en mi muestra a continuación)
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>