Question

document.addEventListener('DOMContentLoaded',()=>{
    document.querySelector("#submit").onclick = (event)=>{
      const li = document.createElement('li');
    };

  document.querySelector("#add-message li,#add-message2 li").addEventListener('click', function() {
  console.log('You have clicked: ',this.textContent);
    });

  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);  
  event.preventDefault();
});

<ul id="add-message">
</ul>

<ul id="add-message2">
  <li>ab</li>
  <li>ss</li>
  <li>sss</li>
</ul>

<ul id="add-message3">
  <li>abc</li>
  <li>ssw</li>
  <li>ssst</li>
</ul>

<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>

我希望使add-message和add-message2 li元素仅可单击。但是它给出了空错误。我尝试使用像CSS的后代组合器中的选择器来选择元素但没有选择li

现在我要从li和#add-message中选择#add-message2

Answer 1

您不能只选择一项WordInfos，并希望所有这些都可以效仿。

那是有效的代码。

IsFinal = true

<li>

Answer 2

您可以在下面尝试代码。所有级别都很清楚。注意li var的正确位置，这会导致您收到错误。还要看看第二个event listener：

document.addEventListener('DOMContentLoaded',()=>{
   document.querySelector("#submit").onclick = (event)=>{
      const li = document.createElement('li');
      li.innerHTML = document.querySelector('#message').value;
      document.querySelector('#add-message').append(li);  
      event.preventDefault();
   };

  document.querySelector("body").addEventListener('click', function(ev){
    var tN = ev.target.tagName.toLowerCase();
    if(tN!="li") return;
    var ul = ev.target.parentNode,
        uid = ul.id;
    if(uid.indexOf("add-message")!=0) return;
    var li=ev.target;
    console.log('You have clicked: ',li.textContent);
  });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

        <form>
          <input type="text" id="message">
          <input type="submit" id="submit">
        </form>

        <ul id="add-message">

        </ul>

        <ul id="add-message2">
            <li>ab</li>
            <li>ss</li>
            <li>sss</li>
        </ul>

        <ul id="add-message3">
          <li>abc</li>
          <li>ssw</li>
          <li>ssst</li>
      </ul>


</body>
</html>

此方法的另一个好处是，如果您动态创建新的ul（它们的ID以add-message开头），该程序仍然可以工作！

HTML中有多个可点击列表

2 个答案: