如何从带有 DOM 的输入中选择父节点的 ID？答案

【问题标题】：How do I select the ID of a parentNode from an Input with DOM?如何从带有 DOM 的输入中选择父节点的 ID？
【发布时间】：2017-07-26 23:34:41
【问题描述】：

当我单击输入时，它应该给我 div 的 ID，但相反，它在控制台中给我一个错误“无法读取未定义的属性 'id'”。

function add(){
  console.log(this.parentNode.id);
}

<div id="example">
  <img src="" alt="" />
  <input type="button" value="click me" onclick="add()">
  <h3>Title</h3>
  <p>Price</p>
  <p>Description</p>
</div>

【问题讨论】：

标签： javascript dom input

【解决方案1】：

在add 函数处定义一个参数并将this 传递给函数调用。不使用 .onclick 或 .addEventListener() 附加到元素 this 是浏览器 JavaScript 事件属性处理程序函数调用中的全局对象 window

function add(el) {
  console.log(el.parentNode.id);
}

<div id="example">
  <img src="" alt="" />
  <input type="button" value="click me" onclick="add(this)">
  <h3>Title</h3>
  <p>Price</p>
  <p>Description</p>
</div>

或者，使用.addEventListener()

function add(event) {
  console.log(this.parentNode.id);
}

onload = function() {
  document.querySelector("#example input[value='click me']")
  .addEventListener("click", add)
}

<div id="example">
  <img src="" alt="" />
  <input type="button" value="click me">
  <h3>Title</h3>
  <p>Price</p>
  <p>Description</p>
</div>

【讨论】：

【解决方案2】：

试试这个：

function add(target){
  alert(target.parentNode.getAttribute('id'));
}

<div id="example">
  <img src="" alt="" />
  <input type="button" value="click me" onclick="add(this)">
  <h3>Title</h3>
  <p>Price</p>
  <p>Description</p>
</div>

【讨论】：

【解决方案3】：

onclick="add(this)"

函数添加(ele)

将元素传递和接收到我的朋友的函数中

【讨论】：