-1

so I'm trying to create a working comment section for a project. It doesn't need to be on bootstrap or still be there when refreshed, I just want to make it work. I feel like I'm close on figuring this out but there is something wrong on my code (as what the console log says). Please, I really need help :( Here's my javascript.

let commentSection = (event) => {
    let $addComment = document.querySelectorAll('.addComment')
    let $commentText = document.querySelectorAll('.comments')
    let $commentList = document.querySelectorAll('.commentList')
    let commentPost = commentText.value.trim();


    document.querySelectorAll('.commentList').innerHTML = `
    <li> Comment for the day: ${commentPost} </li>`
}

document.getElementById(`addComment`).addEventListener('click', commentSection);

and my HTML: 

<div class="comment" id="comment">
    <form>
        <label for="comment"></label>
        <textarea class="comments" placeholder="Let us know what you think!" name="comments" id="comments"></textarea>
    </form>
    <button class="addComment" id="addComment"> COMMENT </button>
</div>
<div class="commList">
    <ul class="commentList" id="commentList"></ul>
</div>

console log on chrome says that there is something wrong on this part 

let commentPost = commentText.value.trim();

I would appreciate any sort of help! Thank you

StackedQ
  • 3,999
  • 1
  • 27
  • 41
spinHead
  • 1
  • 2
  • 2
    Welcome to stackOverflow. Please read [this guide](https://stackoverflow.com/help/how-to-ask) and edit the question accordingly, it will make it easier to people to help you. – Mehdi Apr 02 '20 at 20:51
  • For starters please add what the console actually says – Brian Thompson Apr 02 '20 at 20:57

2 Answers2

1

You forgot the $. let commentPost = $commentText.value.trim();

ElliotYoYo
  • 201
  • 1
  • 3
  • 9
1

You had some syntax errors and were not updating the list correctly: 

function commentSection(){
     let $addComment = document.querySelectorAll('.addComment')
     let $commentText = document.querySelectorAll('.comments')
     let $commentList = document.querySelectorAll('.commentList')
     let commentPost = $commentText[0].value.trim();
     if(commentPost){
          var li = document.createElement('li');
          li.appendChild(document.createTextNode(commentPost));
          $commentList[0].appendChild(li);
      }
}
document.getElementById(`addComment`).addEventListener('click', commentSection);
<form>
     <label for="comment"></label>
     <textarea class="comments" placeholder="Let us know what you think!" name="comments" id="comments"></textarea>
</form>
<button class="addComment" id="addComment"> COMMENT </button>
<div class="commList">
     <ul class="commentList" id="commentList"></ul>
</div>
  • Using querySelectorAll returns a a static NodeList object containing all the elements in the document that matches the specified selector. Therefore, since you aim to use only one element with this class name, you should reference the first element of this list.
  • If you read this post, you can see that appendChild does not cause a complete rebuild of the DOM or even all of the elements/nodes within the target. Whereas using innerHTML will cause a complete rebuild of the content of the target element, which if you're appending is unnecessary.
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
  • This is a good answer. You could improve upon it by adding more details about why your code works. Maybe an explanation that `querySelectorAll` returns an array and not a single element. And details about your use of `createElement` vs `innerHTML`. – Brian Thompson Apr 02 '20 at 21:07
  • I appreciate this!! I tried it but it didn't work too – spinHead Apr 02 '20 at 21:13
  • @spinHead you can run the snippet and see for yourself that it works. Something else must be going wrong. And once again - "didn't work" is much less helpful than the actual error message. – Brian Thompson Apr 02 '20 at 21:15
  • @BrianThompson well noted! – Majed Badawi Apr 02 '20 at 21:15
  • @BrianThompson, you're right! It worked! Thank you so much – spinHead Apr 02 '20 at 21:35
  • The reason I thought it wasnt working is that, it only works on one of the 12 other sections with the same element. I think I would have to make an array instead – spinHead Apr 02 '20 at 21:41