如何在更改 <textarea> 时更新 <p> 元素？

Question

我已经尝试了很多方法来更新 p 元素，我也尝试了常规功能，但不知何故我遇到了 (this) 关键字的问题。我已经搜索了很多地方，但他们所拥有的只是输入标签而不是文本区域标签的 onchange 事件的解决方案。

click here to see the code snippet

Answer 1

在 this.preview.innerHTML 中，this 引用 window 对象，因为箭头函数没有自己的 this。因为你已经有了editor和preview的引用，你可以直接使用preview.textContent= editor.value;

const editor = document.getElementById("editor");
const preview = document.getElementById("preview");

editor.addEventListener('change', () => {
  preview.textContent= editor.value;
});

<textarea name="" id="editor" cols="30" rows="10"></textarea>
 <p id="preview">sdsd</p>

使用this

const preview = document.getElementById("preview");

// Here `this` refer to `textarea` element
editor.addEventListener('change', function() {
  preview.textContent = this.value;
});

<textarea name="" id="editor" cols="30" rows="10"></textarea>
<p id="preview">sdsd</p>

Answer 2

你好用它来预览和编辑器 var 来获取值

var editor = document.getElementById("editor"); 

var preview = document.getElementById("preview");


editor.addEventListener("change",() => {


this.preview.innerHTML = "";

this.preview.innerHTML =  editor.value;
});

<textarea id="editor" type="text"></textarea>

<p id="preview"></p>

如何在更改 <textarea> 时更新 <p> 元素？

how to update <p> element as I change the <textarea>?

html

javascript

textarea

onchange