如何更新 元素，当我更改？ [关闭]

Question

关闭。此问题需要debugging details。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

已关闭4个月前。

我已经尝试了许多方法来更新p元素，我也尝试了常规功能，但是不知何故我遇到了（this）关键字的问题。我搜索了很多地方，但它们所提供的只是输入标签（而不是textarea标签）的onchange事件的解决方案。

click here to see the code snippet

Answer 1

您好，将其用于预览，使用编辑器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>

Answer 2

在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>