JavaScript возвращает undefined для родительского и дочернего элемента - PullRequest
Новая
       2

JavaScript возвращает undefined для родительского и дочернего элемента

1 голос
/ 03 апреля 2019

Я пытаюсь выбрать родительский элемент нажатой кнопки и найти текст дочерних элементов этого родительского элемента, однако он возвращает undefined. 

  var add = document.getElementById("add").parentElement.nodeName;

Я нашел, как мы можем получить доступ кИмя узла родительского элемента, но я не могу выбрать его дочерний элемент на id.

В настоящее время я пытаюсь получить атрибуты для выбранных элементов и пользователя alert(), чтобы отобразить их, однако это не работает должным образом.Код ниже - это то, что у меня сейчас есть: 

window.onload = function(){ 
    add();
}
function add() {
  var add = document.querySelector(".add").parentNode;
  var id = document.querySelector(".id").innerHTML;
  var name = document.querySelector(".std").innerHTML;
  alert(id);
  alert(name);

}
<!DOCTYPE html>
<html>
<body>
  <table>
  	<tr>
    	<th>S.N.</th><th>Name</th><th>Action</th>
     </tr>
     <tr>
    	<td class='id'>1</td><td class='std'>Riya</td><td id='del'>DEL</td>
    </tr>
    <tr>
    	<td class='id'>2</td><td class='std'>Sonam</td><td class='add'>ADD</td>
    </tr>
  </table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Здесь есть две проблемы:

  1. , вы должны использовать document.querySelector() при выборе одного элемента, а не document.querySelectorAll(), который используетсядля выбора нескольких элементов
  2. поле innerHTML следует использовать вместо innerHtml

Обратите внимание, что document.querySelector() возвращает первый выбранный элемент (еслиany), где document.querySelectorAll() возвращает NodeList, содержащий выбранные элементы.

Вот рабочий фрагмент: 

window.onload = function(){ 
    add();
}
function add() {
  var add = document.getElementById("add").parentNode;

  /* Use querySelector for single element, and use innerHTML */
  var id = document.querySelector("#id").innerHTML;
  var name = document.querySelector("#std").innerHTML;

  alert(id);
  alert(name);

}
<!DOCTYPE html>
<html>
<body>
  <table>
  	<tr>
    	<th>S.N.</th><th>Name</th><th>Action</th>
     </tr>
     <tr>
    	<td id='sn'>1</td><td id='name'>Riya</td><td id='del'>DEL</td>
    </tr>
    <tr>
    	<td id='id'>2</td><td id='std'>Sonam</td><td id='add'>ADD</td>
    </tr>
  </table>
</body>
</html>

Надеюсь, что поможет

0 голосов
/ 03 апреля 2019

id значение атрибута должно быть уникальным в вашем HTML. Поэтому, если вы хотите, чтобы несколько элементов с одинаковым идентификатором использовали class, вам также необходимо знать индекс целевого элемента.

Посетите эту ссылку для получения дополнительной информации об атрибуте id

У вас есть опечатка, правильный атрибут - innerHTML, а не innerHtml, и, как уже упоминалось, вам нужно узнать индекс элемента 

window.onload = function(){ 
    add();
}
function add() {
  var add = document.getElementById("add").parentNode;
  var id = document.querySelectorAll("#id")[0].innerHTML;
  var name = document.querySelectorAll("#std")[0].innerHTML;
  alert(id);
  alert(name);
}
<!DOCTYPE html>
<html>
<body>
  <table>
  	<tr>
    	<th>S.N.</th><th>Name</th><th>Action</th>
     </tr>
     <tr>
    	<td id='sn'>1</td><td id='name'>Riya</td><td id='del'>DEL</td>
    </tr>
    <tr>
    	<td id='id'>2</td><td id='std'>Sonam</td><td id='add'>ADD</td>
    </tr>
  </table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...