Question

有人可以帮助我使用我的简单脚本吗？我有一个html代码中的颜色列表，只需要让我的js代码弹出一个带有点击列表项值的警报。请帮我！这就是我所拥有的：

HTML

<ul id="mylist">
  <li>White </li>
  <li>Silver </li>
  <li>Dark Gray</li>
  <li>Khaki </li>
</ul>

这是JS代码（它在窗口加载时显示带有列表项值的警报，但我需要在点击每个项目后显示它）

<script language="JavaScript">
<!--
  var a = document.getElementById('mylist').document.getElementsByTagName('li');
  var b=[];
  for(i=0;i<a.length;i++)
  {
    b=a[i].innerText;
    alert(b);
  } 
//-->
</script>

Answer 1

document.getElementById('mylist').addEventListener('click', function(event) {
  if ('LI' != event.target.tagName) return;
  alert(event.target.innerText);
}, false);

另见：

Answer 2

var a = document.getElementById('mylist').getElementsByTagName('li');

for(var i = 0; i < a.length; i++){
      a[i].onclick = function(){
            alert(this.innerHTML);
      }
}

演示：http://jsbin.com/ayefap/2/

Answer 3

var a = document.getElementById('mylist').getElementsByTagName('li');

document.getElementById("myList")没有.document

如果您使用firebug或chrome控制台，那么您将收到此错误。

Answer 4

无需在原始JavaScript中连接点击处理程序，您可以执行以下操作：

<li><a href="javascript://" onclick="alertMe(this)">White</a></li>

JS：

function alertMe(element) {
      alert(element.innerText)
}

Answer 5

<ul id="mylist">

    <li><a href="javascript:void(0)" onclick="clickMe(this)">White</a></li>
        <li>Silver </li>
            <li>Dark Gray</li>
                <li>Khaki </li>
</ul>

将此添加到您的头部：

<script type="text/javascript">
function clickMe(cid){
alert(cid.innerHTML);

}
</script>

如何通过单击列表项元素来调用警报窗口？

5 个答案: