使用innerHTML和<input />

时间:2011-05-22 05:56:54

标签: javascript html

我正在尝试在输入标记上使用innerHTML方法,而我得到的所有内容都是空白字符串。这是我正在使用的代码。

的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>

应该发生什么取决于我选择哪个单选按钮输入框的标签应该更改。我可以制作label.innerHTML = radio.value,但这些值是以我的php代码命名的,并且没有很好地格式化(即.phonenumber与电话号码)这就是为什么我试图使用单选按钮的innerHTML。

我能得到的任何帮助都会受到很大关注。

5 个答案:

答案 0 :(得分:5)

您应该在input标记内嵌入label。输入标记应由/>关闭。它是语义HTML。执行此操作时,单击标签激活输入。 InnerHTML仅适用于标签。它会返回标签值。

<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'

答案 1 :(得分:1)

如果您想要输入标记的值,则需要使用.value

答案 2 :(得分:1)


完成编辑。

好的,我想出了你在找什么。首先,您必须修复HTML(不要将文本放在输入中......并且不要在标签内输入下一个)。

<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<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;" />

JavaScript(在Jquery中,为简洁起见):

function setName(elem)
{
    $('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}

答案 3 :(得分:1)

首先,在输入周围添加标签。其次,使用getName(this.parentNode)。最后,调用innerText而不是innerHtml。

<html>
<head>
<script>
function setName(el){
    document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last 

Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone 

Number</label><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>
</body>
</html>

答案 4 :(得分:0)

您已使用Input tag未正确关闭</input> 这应该是

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

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