How to get a tag inner html with is inside a div?

Question

I am new to javascript and that's why maybe I am very poor with js .

I am trying to get tag inner HTML which is inside a div parent tag.

I tried many times, but, because of my poor knowledge, I can't get its inner HTML. I can easily get its inner HTML if its data doesn't fetch from the database.

Here is my HTML with php[fetching data]

    <?php
    mysql_connect("localhost", "root", "")or die("cannot connect to server"); 
    mysql_select_db("tsms")or die("cannot select DB");
    $sql = "select * from vendors";
    $result = mysql_query($sql);

    while($row=mysql_fetch_assoc($result))
    {
      echo '<div style="width:25%;margin-right:20px;margin-left:10px;cursor:pointer;" class="w3-third w3-section" id="home_vendorslist" onclick="gethead()">
            <div class="w3-card-4">
            <img src="'.$row["pic_path"].'" style="height: 200px;width: 100%">
            <div style="position: relative;" class="w3-container w3-white">
            <h4 id="venpichead" class="w3-center" style="color: black;">'.$row["heading"].'</h4>
            <p style="height: 100px;overflow: auto;">'.$row["body"].'</p>
            </div>
            </div>
            </div>';
    }
?>

Here many class added from w3 CSS.

I want to get tag inner HTML, whenever anyone clicks any of the main . That's why i call onclick="gethead()" function.

The onclick function code

  function gethead()
  {
     alert(document.getElementById("venpichead").innerHTML);
  }

My main problem is that it returns only one value [same value] every time.

I added all of my div data with a pic below:

When I click any of div, it only return(alert) only "cisco". Why? Any solution?

Answer 1

The reason is because ID selector (id = "venpichead") is unique, ergo, only the first element will keep this attribute.

The solution is use "class" attribute, and catch the event for each element:

<h4 class="venpichead" class="w3-center" style="color: black;" onclick="gethead">

function gethead()
{
    alert(this.innerHTML);
}

BTW: JQuery is recommended for events. It could be something like this:

jQuery('.venpichead').click( function () {
    alert(jQuery(this).html());
});

Answer 2

You should be using/creating unique IDs and NOT re-using them! Though the following should work.

Pass this into your onclick function and then use querySelector() to search within the element. querySelector() support .

Basic example.

 function gethead( el ) { alert( el.querySelector( '#venpichead' ).innerHTML ); } 

 <div onclick="gethead( this )"> <h4 id="venpichead">One</h4> </div> <div onclick="gethead( this )"> <h4 id="venpichead">Two</h4> </div> 

Answer 3

in your PHP you define <h4 id="venpichead" - you do it three times. But id should be unique in the HTML document. You need to use another way to handle the event click: onclick="gethead(this) .

while($row=mysql_fetch_assoc($result))
    {
      echo '<div style="width:25%;margin-right:20px;margin-left:10px;cursor:pointer;" class="w3-third w3-section home_vendorslist" onclick="gethead(this)">
            <div class="w3-card-4">
            <img src="'.$row["pic_path"].'" style="height: 200px;width: 100%">
            <div style="position: relative;" class="w3-container w3-white">
            <h4 class="w3-center venpichead" style="color: black;">'.$row["heading"].'</h4>
            <p style="height: 100px;overflow: auto;">'.$row["body"].'</p>
            </div>
            </div>
            </div>';
    }

javascript:

function gethead(obj)
  {
     alert(obj.getElementsByClassName("venpichead")[0].innerHTML);
  }

Answer 4

You may only have one instance of an id value within your HTML. You are creating the title of each vendor with the same "venpichead" id for the h4 element.

Since each id is supposed to be unique, the getElementById method will only ever reference the first instance that it finds of an id (which, in this case, contains the word "CISCO").

Try changing it to use a common class , instead of an id . However, you will also need to change up your logic a little bit, as well, since getElementByClassName will get all of the h4 elements on the page. So, you will either need to loop through them to get to the one that you want, or reduce the scope of getElementByClassName , so that it only finds the one that you are looking for (eg, use the element that you clicked on as the scope, rather than document ).

Note: You have some other id values that are being repeated in your code . . . you should clean those up too. ;)

Answer 5

Because id attribute should be unique. document.getElementById() method return first element with that id. You are running that echo in loop, so you have multiple elements with that id.