using innerHTML with <input>

Question

I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.

javascript

function setName(ID){
    document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}

HTML

<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>

<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>

What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.

Any help I could get would be greatly appriciated.

Answer 1

you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.

<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
    <input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>

JavaScript:

console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'