Superimposing the text from input form on top of an image

Question

I want the text that I write on the input to be shown inside the "engrave-image" div. For some reason, I cannot get it to work. I appreciate your help.

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>

score 0 · Accepted Answer · answered Nov 15 '17 at 16:27

0

You can use obj directly to reference the input that called then onkeyup event. obj passed in is a reference to an element (an input element in this case) and not an id, so using document.getElementById(obj); doesn't make sense here.

Also you should have quotes around the id attribute in your input.

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>

answered Nov 15 '17 at 16:27

Andrew Lohr

5,380
1
26
38

The quotes didn't fix problem but it seems like the problem was on the function. I appreciate – Donki Nov 15 '17 at 16:35
yes you don't use the ID `"engrave-text"` at all that was just a side note – Andrew Lohr Nov 15 '17 at 16:36

Superimposing the text from input form on top of an image

1 Answers1