我尝试构建一个脚本来检测用户点击的特定<span>
并输出该点击量程内容的值。
我的HTML看起来像这样:
<div id="span-container">
<span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
我的Javascript看起来像这样:
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(spans[i].innerHTML);
}
}
尝试运行此代码会导致Cannot read property 'innerHTML' of undefined
错误。
我确定为每个范围提供与<span id="lorem">Lorem</span>
之类的内容相关的ID,但我乐观地认为存在更优雅的解决方案。
如果可能的话,我也想避免使用jQuery。 谢谢!
答案 0 :(得分:2)
var div = document.getElementById('span-container');
div.addEventListener('click', function(e) {
var target = e.target;
if(target.nodeName == 'SPAN') {
alert(target.innerHTML);
}
});
答案 1 :(得分:1)
问题是,i
在用户点击它时发生了变化。使用自执行函数或eventListener
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
(function (j) {
spans[j].onclick = function() {
alert(spans[j].innerHTML);
}
}(i));
}
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
(function (j) { // Receives as j
spans[j].onclick = function() {
alert(spans[j].innerHTML);
}
}(i)); // Passes in i
}
&#13;
<div id="span-container">
<span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
&#13;
<小时/>
this
this
将引用单击的元素,这可能是执行此操作的最佳方式:
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(this.innerHTML);
}
}
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(this.innerHTML);
}
}
&#13;
<div id="span-container">
<span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
&#13;
答案 2 :(得分:0)
The problem here is the wrong use of a closure variable in a loop
但我认为在这种情况下你可以使用addEventListener
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
function spanClickHandler() {
alert(this.innerHTML);
}
for (var i = 0; i < spans.length; i++) {
spans[i].addEventListener('click', spanClickHandler, false);
}
<div id="span-container"> <span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
或仅使用this.innerHTML
作为this
在事件处理程序内引用span元素
spans[i].onclick = function () {
alert(this.innerHTML);
}
答案 3 :(得分:0)
您可以将this
用于当前元素。
试试这段代码:
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(this.innerHTML);
}
}