Question

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

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>元素？

2 个答案: