将输入表单中的文字叠加在图像顶部

Question

我希望我在输入上写的文字显示在“engrave-image”div中。出于某种原因，我无法让它发挥作用。感谢您的帮助。

function annotate(obj) {
  var typed = document.getElementById(obj).value;
  document.getElementById("engrave-image").innerHTML = typed;
}

<input id="engrave-text" maxlength="15" onkeyup="count_up(this)" onkeyup="annotate(this);">
<div id="engrave-image"></div>

Answer 1

您可以直接使用obj来引用调用onkeyup事件的输入。传入的obj是对元素（本例中为输入元素）的引用，而不是id，因此使用document.getElementById(obj);在这里没有意义。

此外，您应该在输入中的id属性周围加上引号。

function annotate(obj) {
  var typed = obj.value;
  document.getElementById("engrave-image").innerHTML = typed;
}

<input id="engrave-text" maxlength="15" onkeyup="annotate(this);">
<div id="engrave-image"></div>