Question 201086 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript function event.target.getAttribute("src") returns null

I have this list of images

    <div class="item board col-sm-6 col-md-4 col-lg-4 mb-4" onclick="show()">
    <a href="#" class="item-wrap fancybox">
      <div class="work-info">
        <h3>TITLE</h3>
        <span>TEXT</span>
      </div>
      <img class="img-fluid" src="img/image-9.jpg" >
    </a>
  </div>


    <div class="item maison col-sm-6 col-md-4 col-lg-4 mb-4" onclick="show()">
    <a href="#" class="item-wrap fancybox">
      <div class="work-info">
        <h3>TITLE</h3>
        <span>TEXT</span>
      </div>
      <img class="img-fluid" src="img/image-1.jpg" >
    </a>
  </div>

I would like the the the full path of the image when I click on the div

  function show(){
    var img = event.target.getAttribute("src");
    console.log(img);
  }

However when I look in the console it returns null why is that?

Tags:

2

Answers


  1. 0

    Lol, is this a homework or a test question? 😂

    Login or Signup to reply.
  2. 0

    The problem appears to be that the onclick is on the div and not on the img if you update show to the following:

      function show(){
    var img = event.target.querySelector("img").getAttribute("src");
    console.log(img);
  }

    it should work

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search