Using pure javascript, I want to reference the first inner html element within an <a> element, by using the parent's onclick attribute. I tried to use both firstChild and firstChild.InnerHTML, but I could not get my element.

For example, the following html code:

<a href="#" onclick="showImg(this.firstChild.innerHTML)">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

I want to get the <img> element as a parameter into the function showImg(), so I can obtain the title attribute to feed into an image path to be displayed in a modal window/popup.

The same modal window would be displayed using the same function, BTW.

Is this possible to achieve? (Please note that I want to grab the entire element, not just an attribute.)

Doing this because there is no permission to add jquery or other similar libraries.

UPDATE: I am looking for code that works on IE from version 7 upward.

MY SOLUTION: I finally ended using the getAttribute method, after bining both first firstElementChild and children[0] as per details from this answer.

My final solution looks like this:

<a href="javascript:void(0)" 
   onclick="showImg((this.firstElementChild || 
                     this.children[0]).getAttribute('title'))">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

And this is the script:

  function getImg(img) {        
    var container = document.getElementById("some-id");
    var imgPath = 'imgs/' +img+ '.png';
    container.src = imgPath;
  }

Thanks for the insight.

Using pure javascript, I want to reference the first inner html element within an <a> element, by using the parent's onclick attribute. I tried to use both firstChild and firstChild.InnerHTML, but I could not get my element.

For example, the following html code:

<a href="#" onclick="showImg(this.firstChild.innerHTML)">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

I want to get the <img> element as a parameter into the function showImg(), so I can obtain the title attribute to feed into an image path to be displayed in a modal window/popup.

The same modal window would be displayed using the same function, BTW.

Is this possible to achieve? (Please note that I want to grab the entire element, not just an attribute.)

Doing this because there is no permission to add jquery or other similar libraries.

UPDATE: I am looking for code that works on IE from version 7 upward.

MY SOLUTION: I finally ended using the getAttribute method, after bining both first firstElementChild and children[0] as per details from this answer.

My final solution looks like this:

<a href="javascript:void(0)" 
   onclick="showImg((this.firstElementChild || 
                     this.children[0]).getAttribute('title'))">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

And this is the script:

  function getImg(img) {        
    var container = document.getElementById("some-id");
    var imgPath = 'imgs/' +img+ '.png';
    container.src = imgPath;
  }

Thanks for the insight.

• javascript
• html

3 Answers 3

This should do the trick:

function showImg(image) {
  console.log(image);
  }

<a href="#" onclick="showImg(this.children[0].getAttribute('title'))">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

If you want the whole element, replace the onclick with: onclick="showImg(this.children[0])"

You should use the getAttribute function

<a href="#" onclick="showImg(this.firstElementChild.getAttribute('title')">

Use this.firstElementChild.outerHTML

<a href="#" onclick="alert(this.firstElementChild.outerHTML)">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>