JavaScript 为父元素和子元素返回 undefined
[英]JavaScript returns undefined for parent and children element
问题描述
I am trying to select the parent element of a clicked button, and find the child elements text of that parent element however it is returning undefined .
我试图选择单击按钮的父元素，并找到该父元素的子元素文本，但它返回undefined 。
var add = document.getElementById("add").parentElement.nodeName;
I found how we can access the parent element's node name, but I can't select it's child element by id .我找到了如何访问父元素的节点名称，但我无法通过id选择它的子元素。
Currently I am trying to get attributes for selected elements and user alert() to display them, however it's not working as expected.目前我正在尝试获取所选元素的属性和用户alert()以显示它们，但是它没有按预期工作。 The code below is what I currently have:下面的代码是我目前拥有的：
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>SN</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
2 已采纳 2019-04-02 21:29:48
There are two issues here:这里有两个问题：
- you should use
document.querySelector()when selecting a single element, rather thandocument.querySelectorAll()which is used to select multiple elements您应该在选择单个元素时使用document.querySelector()，而不是用于选择多个元素的document.querySelectorAll() - the
innerHTMLfield should be used instead ofinnerHtml应该使用innerHTML字段而不是innerHtml
Note that document.querySelector() returns the first selected element (if any), where as document.querySelectorAll() returns aNodeList containing selected elements.请注意， document.querySelector()返回第一个选定元素（如果有），而document.querySelectorAll()返回包含选定元素的NodeList 。
Here's a working snippet:这是一个工作片段：
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>SN</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>
Hope that helps希望有帮助
解决方案2
0 2019-04-02 21:26:36
id attribute value must be unique across your HTML. id属性值在您的 HTML 中必须是唯一的。 So if you want to have multiple elements with the same identifier use class , also you need to know the index of the element you are targeting.因此，如果您想拥有多个具有相同标识符的元素，请使用class ，您还需要知道您要定位的元素的索引。
visit this link for more info about id attribute访问此链接以获取有关 id 属性的更多信息
You have a typo, the correct attribute is innerHTML not innerHtml and as mentioned before you need to know the index of the element你有一个错字，正确的属性是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>SN</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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.