Page refresh on button click

Question

<!-- HTML -->
<div class="visible" id="render-body"></div>
            <form id="edit-el" class="d-none">
              <textarea
                id="edit-body-el"
                cols="30"
                rows="15"
                class="form-control"
              ></textarea>
              <button id="edit-btn" class="m-2 button">
                Save
              </button>
            </form>

//JavaScript
editBtn.addEventListener("click", function () {
  let myNotes = JSON.parse(localStorage.getItem("notes"));
  let savedIndex;
  for (let i = 0; i < myNotes.length; i++) {
    if (myNotes[i].name === noteObject.name) {
      myNotes.splice(i, 1);
      savedIndex = i;
    }
  }
  noteObject.body = editBodyEl.value;
  myNotes.push(noteObject);
  updateNotes(myNotes);
  bodyRenderEl.className = "visible";
  editEl.className = "d-none";
  renderNoteBody();
});

I created edit button to edit current note. When I press on it it does functional part like updating array and saving it into local storage, but instead rendering updated note on webpage it refreshes it.

score 1 · Answer 1 · answered Mar 15 '23 at 10:29

Since you are using a form, the button will reload the page. To prevent this, there are 2 options:

Do not use form or use this code:

editBtn.addEventListener("click", (event) => {
        event.preventDefault(); // Prevent default form callback from button clicking.
        saveNote();
    });

Page refresh on button click

1 Answers1