How do I add an input form when clicking an HTML link using javascript?

Question

I want to have a div containing a link. When clicked, the link should be replaced by <input type="text">, but it just doesn't work.

Any other html code works, but for some reason I can not replace the link with an input:

function working() {
  document.getElementById("working").innerHTML = "<h1>Test</h1>";
};
function notworking() {
  document.getElementById("notworking").innerHTML = "<input type="text">";
};

<div id="working">
  <a onclick="working();" href="#">This works!</a>
</div>
<div id="notworking">
  <a onclick="notworking();" href="#">This doesn't!</a>
</div>
<p>
Notice that the entire code doesn't work unless you comment out the "notworking()" function!
</p>

You have a typo resulting in a syntax error. When something "isn't working" you should *at least* look at the debugging console for any errors. — David, Nov 17 '16 at 15:37

score 2 · Accepted Answer · answered Nov 17 '16 at 15:36

2

You need single quotes for your nested quotes;

function notworking() {
document.getElementById("notworking").innerHTML = "<input type='text'>";
}

I've done this so many times haha, when using quotes inside double quotes always use single quotes.

Hope it helps!

answered Nov 17 '16 at 15:36

Tom Johnson

679
5
15

Oh man haha thanks, that makes sense! – Keno Goertz Nov 17 '16 at 15:40

Sam W · Answer 2 · 2016-11-17T15:42:21.037

It is because of this line:

document.getElementById("notworking").innerHTML = "<input type="text">";

You're starting the string with double quotes but using double quotes within the string. This causes a syntax error in your JavaScript. If you need double quotes inside the string, use single quotes around the whole string, and vice versa.

change

document.getElementById("notworking").innerHTML = "<input type="text">";

to

document.getElementById("notworking").innerHTML = '<input type="text">';

score 0 · Answer 3 · answered Nov 17 '16 at 15:37

0

Do like this. Notice the quotes around text

document.getElementById("notworking").innerHTML = "<input type='text'>";

answered Nov 17 '16 at 15:37

brk

48,835
10
56
78

How do I add an input form when clicking an HTML link using javascript?

3 Answers3