如何让 ViewButton 不复制旧的 note.value

Question

//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 class="ntag" for="note">Note:</label>
  <input class="ntag" name="note" id="Note" type="text" placeholder="Write a note">

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

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

我不确定为什么，但是模型容器中的注释会重复，在你做另一个注释后，第一个仍然存在，第二个紧随其后。

我以为可能是放置，所以我把它放在btn函数中，但它也重复了；也很抱歉这有多丑，我只关注 JavaScript

Answer 1

如果您在添加一些注释后检查源代码，您会注意到它看起来像这样，假设我添加了注释“一”、“二”和“三”：

因为 javascript:

这一行所以把它放在那里

model.append(note.value);

The .append() method 不会清除 <div id="model"> 中的任何内容，它只是通过在按钮后转储或在任何现有文本后转储来添加到其中的任何内容。

为了避免删除“Close Me”按钮，您可能需要另一个 div 专门用于文本，这样您就可以设置 .textContent 而不是使用 .append()每次的元素。这将以一种您不想在父元素上执行此操作的方式具有破坏性，因为它会清除按钮。 .append() 是点击“查看详情”时保留之前内容的内容。

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

因此，不要使用 .append()，只需通过设置 .textContent.

<div id="txtDetails">

我还在创建按钮时添加了一个“data-text”属性，这样可以更轻松地提取文本而不是在父元素和元素之间导航。
最后，在点击侦听器事件中，我让它获取存储在“data-text”属性中的任何内容，并将其放入 <div id="txtDetails">，这样每次“查看详细信息”点击只会显示什么与该特定注释相关。此方法具有破坏性，因为它会在每次单击时清除并替换 <div id="txtDetails"> 中的任何内容，但会单独保留模态中的按钮。

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/

如何让 ViewButton 不复制旧的 note.value

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

html

javascript

css

dom