My comments are not staying within container using JS HTML & CSS-CodePudding

This problem pertains to Vanilla JS, HTML, & CSS

I'm working on a practice project I have coined "Social Media Daily Quotes." I have created a comment section and the functionality works, however I believe my JS/HTML/CSS are out of balance. The comment section starts out working fine, then after 3-4 comments it doesn't expand the container it is in, but passes through the container and my comment form.

My goal is for the comments to stay within that comment-container and for the comment form to stay below the comments, I've tried a few things but I honestly don't know due to my newness in the space.

Also, for some reason I keep throwing an error when I use postForm.reset(). It worked before and stopped working somewhere along the way of me writing code. It returns an error saying that is not a function, which I understand what it means, but I don't understand why...

How can I fix this problem?

Photo of the problem I am having:

Photo of the problem I am having

   const postForm = document.querySelector('#post-container')
    const commentList = document.querySelector('#comment-list')
    const commentContainer = document.querySelector('#comment-container')
    postForm.addEventListener('submit', newCommentAndlikes)


    function newCommentAndlikes (e, likes) {
        e.preventDefault();
        const div = document.createElement('div')
        div.id = "commentsAndLikes-container"

        let li = document.createElement('li')
        li.textContent = e.target.addComment.value

        const commentLikesNum = document.createElement('h3')
        commentLikesNum.textContent = "0"

        const likesBttn = document.createElement("button")
        likesBttn.className = 'like-bttn'
        likesBttn.textContent = "♥"

        likesBttn.addEventListener('click', () => increaseLikes(commentLikesNum))


        li.appendChild(commentLikesNum)
        li.appendChild(likesBttn)
        commentList.append(li)
        commentContainer.appendChild(commentList)
        // postForm.reset();
    }

    function increaseLikes(commentLikesNum){
        // inside here incrememnt character number of likes
          commentLikesNum.textContent
      }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    padding-top: 15px;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 110vh;
    background-color: lavender;
    font-family: Lucida Handwriting, cursive;
}

img {
    border: 5px solid rgb(194, 191, 201);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

#quote{
    font-size: 40px;
}

#dropdown-container{
    margin-top: 15px;
    font-size: 25px;
}

#quote-dropdown {
  /* height: 30px */
  position: absolute;
  background-color: #f9f9f9;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 12px;


}



#comment-list{
    list-style: none;
}

li {
    background-color: white;
    border-radius: 5px;
    border: 1px solid black;
    padding: 20px;
    margin-bottom: 20px;
  }

#comment-container{
    width: 600px;
    height: 350px;
    border: 2px solid #333;
    margin: auto;
    margin-top: 40px;
    padding: 15px 35px;
    background-color: whitesmoke;
}


#post-container{
    margin-top: 30px;
}

.container{
    width: 600px;
    border: 2px solid #333;
    margin: auto;
    padding: 15px 35px;
    background-color: whitesmoke;
}

.container h2{
    text-align: center;
    margin-bottom: 25px
}

textarea{
    height: 20px;
    width: 100%;
    border: none;
    border-bottom: 2px solid #aaa;
    background-color: transparent;
    margin-bottom: 10px;
    resize: none;
    outline: none;
    transition: .5s
}

input[type="submit"] {
    padding: 10px 15px;
    border: none;
    outline: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

input[type="submit"]{
    color: black;
    background-color: whitesmoke;
}

button{
    padding: 3px 8px;
    border-radius: 5px;
    color: #fff;
    background-color: black;
}

.btn{
    display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="index.js"></script>
    <title>Document</title>
</head>
<body>



    <div id="main-content">

        <h1><strong><em>Social Media Daily Quotes</em> </strong></h1>

        <div id="imageHere">
            <img  src="https://source.unsplash.com/1600x900/?beach" alt="beach image" width="850" height="300"/>
        </div>
                <!-- <img src="https://random.imagecdn.app/500/150"> -->


        <div id="quote-container">
                <div id="quote">
                <h2> </h2>
                </div>
        </div>


        <div id="dropdown-container">
        <label for="select-quote">Find other quotes: </label>
        <select id="quote-dropdown" name="select-quote">
            <option value = "x">Quote of The Day!</option>
            <option value="a">Tosie's Favourite Quote ~</option>
            <option value="b">Jacob's Favourite Quote </option>
            <option value="c">Taulant's Favourite Quote </option>
        </select>
        </div>


        <div id="quote-container">


        <div id="comment-container">
        <h3> Comments: </h3>
            <ul id="comment-list">


            </ul>
        </div>


        <div id="post-container">
         <h2>Leave Them a Comment</h2>

            <form>
            <textarea id="addComment" placeholder='Add Your Comment Here'></textarea>

            <div >
                <input type="submit" value='Comment'>
                <button id='clear'>Cancel</button>
            </div>
            </form>
        </div>
        </hr>

    </div>


</body>
</html>

What's Happening

CodePudding user response：

Welcome! I checked the code, your comments are not in center because you #comment-list have padding on it so

#comment-list{
  list-style: none;
  padding: 0;
}

than for your comment bar you set height: 350px; when you set height like this box will not expand so i commented out and add min-height:350px

#comment-container{
  width: 600px;
  /* height: 350px; */
  min-height: 350px;
  border: 2px solid #333;
  margin: auto;
  margin-top: 40px;
  padding: 50px 35px;
  background-color: whitesmoke;
}

Your js problem is you are trying to reset div element

html
<div id="post-container">

js
const postForm = document.querySelector('#post-container')

you need to reset form

html
<form id ="post-form">

js
  const postFormNew = document.querySelector('#post-form')
  postFormNew.reset();

CodePudding user response：

EDIT: On thinking about it the exception might be because #post-container is a <div> and not a <form>

But to create an auto expanding div make the following changes to #comment-container

#comment-container {
    min-height: 350px;
    height: 100%;
    overflow: auto;
    ...
}

const postForm = document.querySelector('#post-container')
const commentList = document.querySelector('#comment-list')
const commentContainer = document.querySelector('#comment-container')
postForm.addEventListener('submit', newCommentAndlikes)


function newCommentAndlikes(e, likes) {
  e.preventDefault();
  const div = document.createElement('div')
  div.id = "commentsAndLikes-container"

  let li = document.createElement('li')
  li.textContent = e.target.addComment.value

  const commentLikesNum = document.createElement('h3')
  commentLikesNum.textContent = "0"

  const likesBttn = document.createElement("button")
  likesBttn.className = 'like-bttn'
  likesBttn.textContent = "♥"

  likesBttn.addEventListener('click', () => increaseLikes(commentLikesNum))


  li.appendChild(commentLikesNum)
  li.appendChild(likesBttn)
  commentList.append(li)
  commentContainer.appendChild(commentList)
  // postForm.reset();
}

function increaseLikes(commentLikesNum) {
  // inside here incrememnt character number of likes
    commentLikesNum.textContent
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 15px;
  display: flex;
  justify-content: center;
  text-align: center;
  height: 110vh;
  background-color: lavender;
  font-family: Lucida Handwriting, cursive;
}

img {
  border: 5px solid rgb(194, 191, 201);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

#quote {
  font-size: 40px;
}

#dropdown-container {
  margin-top: 15px;
  font-size: 25px;
}

#quote-dropdown {
  /* height: 30px */
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 12px;
}

#comment-list {
  list-style: none;
}

li {
  background-color: white;
  border-radius: 5px;
  border: 1px solid black;
  padding: 20px;
  margin-bottom: 20px;
}

#comment-container {
  width: 600px;
  min-height: 350px;
  height: 100%;
  overflow: auto;
  border: 2px solid #333;
  margin: auto;
  margin-top: 40px;
  padding: 15px 35px;
  background-color: whitesmoke;
}

#post-container {
  margin-top: 30px;
}

.container {
  width: 600px;
  border: 2px solid #333;
  margin: auto;
  padding: 15px 35px;
  background-color: whitesmoke;
}

.container h2 {
  text-align: center;
  margin-bottom: 25px
}

textarea {
  height: 20px;
  width: 100%;
  border: none;
  border-bottom: 2px solid #aaa;
  background-color: transparent;
  margin-bottom: 10px;
  resize: none;
  outline: none;
  transition: .5s
}

input[type="submit"] {
  padding: 10px 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}

input[type="submit"] {
  color: black;
  background-color: whitesmoke;
}

button {
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
  background-color: black;
}

.btn {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="index.js"></script>
  <title>Document</title>
</head>

<body>



  <div id="main-content">

    <h1><strong><em>Social Media Daily Quotes</em> </strong></h1>

    <div id="imageHere">
      <img  src="https://source.unsplash.com/1600x900/?beach" alt="beach image" width="850" height="300" />
    </div>
    <!-- <img src="https://random.imagecdn.app/500/150"> -->


    <div id="quote-container">
      <div id="quote">
        <h2> </h2>
      </div>
    </div>


    <div id="dropdown-container">
      <label for="select-quote">Find other quotes: </label>
      <select id="quote-dropdown" name="select-quote">
        <option value="x">Quote of The Day!</option>
        <option value="a">Tosie's Favourite Quote ~</option>
        <option value="b">Jacob's Favourite Quote </option>
        <option value="c">Taulant's Favourite Quote </option>
      </select>
    </div>


    <div id="quote-container">


      <div id="comment-container">
        <h3> Comments: </h3>
        <ul id="comment-list">


        </ul>
      </div>


      <div id="post-container" >
        <h2>Leave Them a Comment</h2>

        <form>
          <textarea id="addComment" placeholder='Add Your Comment Here'></textarea>

          <div >
            <input type="submit" value='Comment'>
            <button id='clear'>Cancel</button>
          </div>
        </form>
      </div>
      </hr>

    </div>


</body>

</html>