在瀏覽器中存儲var鏈接的純JavaScript方法

Question

我無法編輯我的HTML，但我希望將錨點的變量存儲在列表項中，以便我可以創建一個onclick事件。

目前沒有任何工作，我假設它可能是querySelectorAll被錯誤地使用。幫助讚賞。

//set the link class on nav items 
 
var link = document.querySelectorAll('.nodiv a'); 
 

 
console.log(link); 
 

 
link.onclick = function(e) { 
 
\t e.preventDefault(); 
 
\t alert("clicked!"); 
 
}

<ul> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
</ul>

Answer 1

querySelectorAll返回節點列表，讓你在列表必須循環，以獲得實際的節點。

//set the link class on nav items 
 
var link = document.querySelectorAll('.nodiv a'); 
 

 
console.log(link); 
 

 
for (var i = 0; i < link.length; i++) { 
 
    link[i].onclick = function (e) { 
 
     e.preventDefault(); 
 
     alert('clicked!'); 
 
    } 
 
}

<ul> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
</ul>

Answer 2

你試圖將onclick函數添加到元件的陣列。您需要將其設置爲一個單一的元素是這樣的：

//set the link class on nav items 
 
var link = document.querySelectorAll('.nodiv a'); 
 

 
console.log(link); 
 

 
for(var i=0;i<link.length;i++) { 
 
    link[i].onclick = function(e) { 
 
\t  e.preventDefault(); 
 
\t  alert("clicked!"); 
 
    } 
 
}

<ul> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
\t <li class="nodiv"><a href="#">Link</a></li> 
 
</ul>