CODEWITHSUNDEEP
javascripthtml
green seek
green seek

Reputation: 133

more than one clickable list in html

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>

I want make add-message and add-message2 li element to be only clickable. But it give null error. I try to select element using selector like in CSS, descendant combinator but it failed to select li

Right now I am selecting li from #add-message and #add-message2

Upvotes: 0

Views: 266

Answers (2)

StSav012
StSav012

Reputation: 786

You can't select just one <li> item and hope that all of them will follow.

That's the code that works.

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();
        // note the lines added here ↓↓↓
        li.addEventListener('click', function() {
                console.log('You have clicked', this.textContent);
            });
        // add an item into the second list
        const li2 = document.createElement('li');
        li2.innerHTML = document.querySelector('#message').value;
        document.querySelector('#add-message2').append(li2);
        event.preventDefault();
        li2.addEventListener('click', function() {
            console.log('You have clicked', this.textContent);
        });
    };

    // and don't forget the loop here ↓↓↓
    for (let li of document.querySelectorAll("#add-message li, #add-message2 li")) {
        // here ↓↓↓ you should add event listeners to list items one by one
        li.addEventListener('click', function() {
            console.log('You have clicked', this.textContent);
        });
    }

});
<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>

Upvotes: 1

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

You can try code below. all levels are clear. pay attention to correct place of li var Which leads to the error that you receive it. also look at the second 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>

Another benefit of this method is that if you dynamically create new uls (that their Id starts with add-message), this program will still work!

Upvotes: 1

Related Questions