more than one clickable list in html

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>

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

For your `document.querySelectorAll("li").addEventListener`, see https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method . Also look up how scoping works in JS - your `li` is not in scope when you try to assign to its `innerHTML`. — CertainPerformance, Sep 18 '18 at 06:31

StSav012 · Answer 1 · 2018-09-19T19:34:54.180

1

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>

edited Sep 19 '18 at 19:34

answered Sep 18 '18 at 07:07

StSav012

776
5
15

for (let li of document.querySelectorAll("#add-message li, #add-message2 li")) { is not working when list is changed to for (let li of document.querySelectorAll("#add-message ") then it is printing all li inside add-message not just clicked one – green seek Sep 18 '18 at 09:35
@green-seek, done. What browser do you use? The code is working fine for me. – StSav012 Sep 18 '18 at 13:07
your code is working, i tried on two input form .but there i used for loop so it didn't work. your code is really easy to understand , please add one form to make it clickable. – green seek Sep 18 '18 at 17:13
I don't get it. What for do you want to be clickable? What do you mean by that? There is only one form, so where is the second one you're talking about? – StSav012 Sep 18 '18 at 19:54
i have 2 in < form >and one button , i want value from them in
in two different

green seek

Sep 19 '18 at 14:00

If you want to append the entered text into two lists at a time, I have changed the answer accordingly. All new items are clickable. And you have 2 `input`s, one of which is Submit button, not “and”. – StSav012 Sep 19 '18 at 19:36

it is still not working , when used #add-channels it is collecting all li and with # add-channel li it is not working https://github.com/rupesh2017/local-storage-chat-note-app/blob/master/final(notworking)3/templates/chat.html https://github.com/rupesh2017/local-storage-chat-note-app/blob/master/final(notworking)3/static/index.js – green seek Sep 20 '18 at 13:57

Okay, I'm catching up. Check [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) out, namely the part after “Do not reuse generators” title. **TL;DR** Replace `of` with `in` inside `for(…)`. – StSav012 Sep 21 '18 at 12:16

Hassan Sadeghi · Answer 2 · 2018-09-18T12:20:56.417

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!

more than one clickable list in html

2 Answers2