Question

i have a problem with calling an onclick function multiple times. The problem is that I am using the same ID but I want to be able to reuse the function again for the second call. Here’s what I have so far:

<p onclick='myfunction()'> Click this text for input box  below </p>
<b id='myThing'>input box appears .. ta daa</b>
<p onclick='myfunction()'> Click this new text for input box below </p>
<div id='myThing'> but no input box appears here, the line above must turn this text into a  textbox, but it doesn't because of similar id, how do i fix the id problem without defining a new id over and over?</div>
<script>
  function myfunction(){
    document.getElementById("myThing").innerHTML='<input type="text"/>';
  }
</script>

Is there a way to convert the ID into a Javascript variable? How do I make the part create an input box?

Answer 1

You may do this :

<p onclick='myfunction("myThing")'> Click this new text for input box below </p>
<script>
function myfunction(id){
 document.getElementById(id).innerHTML='<input type="text"/>';
 }
 </script>

Demonstration

Note that you may also make the whole thing simpler : simply not use any id but let the function find the next element :

<p onclick='myfunction(this)'> Click this text for input box  below </p>
<b>input box appears .. ta daa</b>
<p onclick='myfunction(this)'> Click this new text for input box below </p>
<div> but no input box appears here, the line above must turn this text into a  textbox, but it doesn't because of similar id, how do i fix the id problem without defining a new id over and over?</div>

​<script>
function myfunction(element){
    do {
        element = element.nextSibling;
    } while (element && element.nodeType != 1);
    element.innerHTML='<input type="text"/>';
 }
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Demonstration