Doesn't display the image when clicked?

  <div class="pic">
    <input type="button" value="Кошка" id="cat">
    <input type="button" value="Собака" id="dog">
    <input type="button" value="Хорек" id="fre">
    <input type="button" value="Шиншила" id="chin">
    <input type="button" value="Хомяк" id="hams"><br><br>
    <img src="/img/net.jpg" alt="foto" id="im">
  </div>
document.querySelector(".pic").addEventListener("click", function () {
  if (event.target.tagName == "INPUT") {
    let a = event.target.id;
    document.getElementById("im").src = "/img/" + a + ".jpg";
    document.getElementById("im").style.border = "1px solid #000000";
  }
});

Here is a simple example, when clicked, pictures of animals should appear, it would seem so easy to do, but not in Javascript)))), I don’t see a picture of a ferret and a hamster, what’s the matter, of course, you won’t understand the correct ways, there is an error in the fre console. jpg:1

    GET http://127.0.0.1:5500/img/fre.jpg 404 (Not Found)

They appear for me ok.

That is all your code but with some online images referenced instead.

You either don’t have the images where you say they are or you are doing something on a local server that also doesn’t match the correct paths.

1 Like

There was an error in the file name in the picture, but I changed it myself, thinking that it would work the same, but no, as I usually say, it is impossible to understand Javascript, you can only agree that it is so. must be)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.