Date on posts is updated after another post is added ja JavaScript-CodePudding

Currently I am doing a small school project, its a forum where you can add posts, see the date when it was added, sort by date, etc.

My problem here is when the post is added, it always update the latest date on every post (see on screenshot, time between adding them is few minutes) enter image description here

    const date = new Date();
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    let day = date.getDate();
    let month = date.getMonth()   1;
    let year = date.getFullYear();


    postsView.innerHTML  = `<div >
        <div >
          <p> ${title} [${day}-${month}-${year}, ${hour}:${minute}:${second} AM]: ${description}
          <a href="#" onclick="deletePost('${title}')" >Delete</a>
          </p>
        </div>
      </div>`;

I tried with:

const date = new Date();
console.log(date.toLocaleString());

but the result is the same.

Thanks! :)

CodePudding user response：

It looks like you are using the date variable in a way that causes all of your posts to have the same timestamp. This is because you are creating a new Date object and using it to set the timestamp for all of your posts, so they all have the same timestamp, which is the time at which the date variable was created.

To fix this, you can move the creation of the date variable inside the function where you are adding the posts, so that a new Date object is created for each post and it will have a unique timestamp.

Here is an example of how you can do this:

function addPost(title, description) {
  // Create a new Date object for the current time
  const date = new Date();

  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  let day = date.getDate();
  let month = date.getMonth()   1;
  let year = date.getFullYear();

  postsView.innerHTML  = `<div >
      <div >
        <p> ${title} [${day}-${month}-${year}, ${hour}:${minute}:${second} AM]: ${description}
        <a href="#" onclick="deletePost('${title}')" >Delete</a>
        </p>
      </div>
    </div>`;
}

CodePudding user response：

You should define an onClick function for your button to add posts and then update the content in that function.

const handleAddPost = (title, description) => {
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const day = date.getDate();
  const month = date.getMonth()   1;
  const year = date.getFullYear();

  const postsView = document.getElementById("post-view");

  postsView.innerHTML  = `<div >
    <div >
      <p> ${title} [${day}-${month}-${year}, ${hour}:${minute}:${second} AM]: ${description}
      <a href="#" onclick="deletePost('${title}')" >Delete</a>
      </p>
    </div>
  </div>`;
}

<div>
  <div id="post-view"></div>
  <button onclick="handleAddPost('${title}', '${description}')">Add Post</button>
</div>