Я новичок в javascript, и поэтому, может быть, я очень беден js.

Я пытаюсь получить тег внутреннего HTML, который находится внутри тега родительского div.

Я пробовал много раз, но из-за моих плохих знаний я не могу получить его внутренний HTML. Я могу легко получить его внутренний HTML, если его данные не извлекаются из базы данных.

Вот мой HTML с php [выборка данных]

    <?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>';
    }
?>

Здесь много классов добавлено из w3 CSS.

Я хочу получить тег внутреннего HTML, когда кто-нибудь нажимает на любой из основных. Вот почему я вызываю функцию onclick = "gethead ()".

Код функции onclick

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

Моя главная проблема заключается в том, что он возвращает только одно значение [то же значение] каждый раз.

Я добавил все свои данные div с картинкой ниже:

div data fetched from database

Когда я нажимаю на любой из div, он только возвращает (оповещение) только «cisco». Почему? Любое решение?

1
nayan chowdhury 9 Янв 2017 в 22:26

5 ответов

Лучший ответ

Вы должны использовать / создавать уникальные идентификаторы, а НЕ использовать их повторно! Хотя следующее должно работать.

Передайте this в вашу функцию onclick, а затем используйте querySelector() для поиска в элементе. поддержка querySelector ().

Основной пример.

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>
1
hungerstar 9 Янв 2017 в 20:11

В своем PHP вы определяете <h4 id="venpichead" - вы делаете это три раза. Но id должен быть уникальным в документе HTML. Вам нужно использовать другой способ обработки события 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);
  }
0
Banzay 9 Янв 2017 в 19:45

Причина в том, что селектор идентификатора (id = "venpichead") уникален, поэтому только первый элемент сохранит этот атрибут.

Решением является использование атрибута "class" и отслеживание события для каждого элемента:

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

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

Кстати: JQuery рекомендуется для событий. Это может быть что-то вроде этого:

jQuery('.venpichead').click( function () {
    alert(jQuery(this).html());
});
1
Alex Gama 9 Янв 2017 в 19:35

В вашем HTML может быть только один экземпляр значения id. Вы создаете заголовок каждого поставщика с одинаковым «venpichead» id для элемента h4.

Так как каждый id должен быть уникальным, метод getElementById всегда будет ссылаться только на первый найденный экземпляр id, который в этом случае содержит слово "CISCO" ) .

Попробуйте изменить его, чтобы использовать общий class вместо id. Однако вам также потребуется немного изменить свою логику, поскольку getElementByClassName получит все элементы h4 на странице. Таким образом, вам нужно будет либо просмотреть их, чтобы перейти к нужному, либо уменьшить область действия getElementByClassName, чтобы он нашел только тот, который вы ищете (например, используйте элемент, который вы щелкните как область действия, а не document).

Примечание. У вас есть другие id значения, которые повторяются в вашем коде. , , Вы должны очистить их тоже. ; )

0
talemyn 9 Янв 2017 в 19:36

Потому что атрибут id должен быть уникальным. Метод document.getElementById () возвращает первый элемент с этим идентификатором. Вы запускаете это эхо в цикле, поэтому у вас есть несколько элементов с этим идентификатором.

0
Nikolay Nikolaev 9 Янв 2017 в 19:37