How do I get the ViewButton to not copy the old note.value-CodePudding

//javascript, this is where I'm having the issue

const form = document.querySelector("#Form");
const note = document.querySelector("#Note");

const table = document.querySelector("#noteTable");

const count = 0;
form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (note.value !== '') {
    const btn = document.createElement("button");
    btn.innerHTML = "View Details";
    const row = table.insertRow();
    const noteRow = row.insertCell();
    const viewD = row.insertCell();
    noteRow.innerHTML = note.value;
    viewD.append(btn);
    model.append(note.value);
    note.value = "";
    btn.addEventListener("click", () => {
      model.classList.add("show");
    });
    const close = document.querySelector("#close");
    close.addEventListener("click", () => {
      model.classList.remove("show");
    });
  } else {
    alert("Write a note!");
  }
});

css button {
  color: black;
  background-color: green;
}

body {
  background-color: rgb(182, 215, 227);
  min-height: 100vh;
  margin: 0;
}

.model-container {
  background-color: rgba(245, 222, 179, 0.38);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vh;
  opacity: 0;
  pointer-events: none;
}

.model {
  background-color: white;
}

.model-container.show {
  pointer-events: auto;
  opacity: 1;
}

.open:hover {
  cursor: pointer;
  color: white;
}

td {
  display: block;
}

<h2>NOTE TAKER</h2>
<h6>Add A New Note:</h6>
<form id="Form" action="#">
  <label  for="note">Note:</label>
  <input  name="note" id="Note" type="text" placeholder="Write a note">

  <button id="Add">Add Note</button>
</form>
<div >
  <table id="noteTable">
    <tr id="Headers" >
      <th></th>
    </tr>
  </table>
</div>

<div  id="model">
  <div >
    <button  id="close">Close Me</button>
  </div>
</div>

I'm not sure why but the notes repeat in the model-container, after you make another note the first one is still there with the second one right after it.

I thought that it could be the placement, so i put it in the btn function, but it duplicated as well; also sorry for how ugly this is, I'm just focused on the JavaScript

CodePudding user response：

If you inspect the source after adding a few notes, you'll notice that it looks like this, assuming I added notes "one", "two" and "three":

It's putting it there because of this line of javascript:

model.append(note.value);

The .append() method doesn't wipe out anything in the <div id="model">, it just adds on to whatever is in there by dumping it after the button or dumping after any existing text.

To avoid erasing the "Close Me" button you'll probably want another div specifically for the text so that instead of using .append() you can just set the .textContent of the element each time. This would be destructive in a way that you wouldn't want to do this on the parent element, because it would wipe out the button. .append() is what is retaining the previous stuff when you click "View Detail."

<div  id="model">
    <div >
        <button  id="close">Close Me</button>
    </div>
    <div id="txtDetails"><div>
</div>

So instead of using .append() just set the text of <div id="txtDetails"> to what you want it to say by setting the .textContent.
I also added a "data-text" attribute to the button on creation so it would be easier to fish out the text instead of navigating the parent elements and across elements.
Finally, on the click listener event I made it take whatever is stored in the "data-text" attribute and place that into <div id="txtDetails"> so that each "View Details" click would only show what is relevant for that particular note. This method is destructive in that it wipes out and replaces anything in <div id="txtDetails"> with each click but leaves the button in the modal alone.

const form = document.querySelector("#Form");
const note = document.querySelector("#Note");

const table = document.querySelector("#noteTable");

const count = 0;
form.addEventListener("submit", (e) => {
  e.preventDefault();
  if(note.value !== '')
  {
    const btn = document.createElement("button");
    btn.innerHTML = "View Details";
    btn.setAttribute('data-text', note.value);
    const row = table.insertRow();
    const noteRow = row.insertCell();
    const viewD = row.insertCell();
    noteRow.innerHTML = note.value;
    viewD.append(btn);
    note.value = "";
    btn.addEventListener("click", () => {
      document.getElementById('txtDetails').textContent = btn.getAttribute('data-text');
      model.classList.add("show");
    });
    const close = document.querySelector("#close");
    close.addEventListener("click", () => {
      model.classList.remove("show");
    });
  }
  else{
    alert("Write a note!");
  }
});

https://jsfiddle.net/tnqp8L0x/