如何從DOM輸入中選擇父節點的ID？

Question

當我點擊輸入時，它應該給我的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>

Answer 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>

Answer 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>

Answer 3

的onclick = 「增加（這）」

函數add（ELE）

傳遞和接收的元素融入功能我朋友