使用带有 <input> 的 innerHTML [英] using innerHTML with <input>

问题描述

我试图在输入标签上使用 innerHTML 方法，但我得到的只是一个空白字符串.这是我正在使用的代码.

javascript

function setName(ID){document.getElementById('searchtitle').innerHTML = "输入" + 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)">电话号码</input><br/><label for="inputfield" id="searchtitle" style="font-size:2em;">输入姓氏</label><br/><input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>

应该发生什么取决于我选择哪个单选按钮，输入框的标签应该改变.我可以制作 label.innerHTML=radio.value 但这些值是为我的 php 代码命名的，并且格式不正确(即电话号码与电话号码)，这就是我尝试使用单选按钮的 innerHTML 的原因.

我能得到的任何帮助都会非常感激.

解决方案

你应该将 input 嵌入 label 标签内.输入标签应该由 /> 关闭.它是语义 HTML.当你这样做时，点击标签激活输入.InnerHTML 只适用于标签.它将返回您的标签值.

 输入姓氏<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"/>

JavaScript:

console.log(document.getElementById('searchtitle').innerHTML);//返回输入姓氏"

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.

解决方案

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'

这篇关于使用带有 <input> 的 innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！