JavaScript 将内容可编辑值设置为变量

Question

我在 html 中有一个内容可编辑的 <p> 标记和一个按钮。我想知道如何做到这一点，以便在按下按钮时，名为 content 的变量将设置为 content editable p tag 内的值。例如，如果您输入<p> 标签“Hello world”并按下按钮，变量内容的值将是“Hello world”

代码：

<p contenteditable="true">
hi
</p>

<button onclick="update()">
Update
</button>

<script>
function update() {
var content = "content of content editable"
console.log (content)
}
</script>

Answer 1

您首先希望通过使用内联脚本来避免任何问题。因此，首先要摆脱 onclick，并为您将用于此操作的每个元素指定一个特定的 ID。

接下来我们将查询选择元素/按钮并为我们的按钮应用一个事件侦听器，以了解何时单击它以做出适当的反应。

下面是一个例子。这有点重复，但应该没问题。

function update() {
  return "content of content editable";
}
// Select the submit button
document.querySelector("#editable_submit").addEventListener("pointerup", (event) => {
  // Button Clicked
  document.querySelector("#editable_box").innerText = update(); // Update Editable Box
}, {
  passive: true
});

<p id="editable_box" contenteditable="true">
  hi
</p>

<button id="editable_submit">
Update
</button>