Javascript 使用带有 <input> 的 innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6086318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using innerHTML with <input>
提问by user052211
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.
我正在尝试在输入标签上使用 innerHTML 方法，我得到的只是一个空白字符串。这是我正在使用的代码。
javascript
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
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.
应该发生的事情取决于我为输入框选择的标签应该更改的单选按钮。我可以制作 label.innerHTML=radio.value 但这些值是为我的 php 代码命名的，并且格式不正确（即电话号码与电话号码），这就是我尝试使用单选按钮的 innerHTML 的原因。
Any help I could get would be greatly appriciated.
我能得到的任何帮助都会非常有用。
回答by Mohsen
you should embed inputinside of labeltag. 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.
你应该嵌入标签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:
JavaScript：
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
回答by tofutim
First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
首先，在输入周围添加标签。其次，使用 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>
回答by tofutim
If you want the value of an input tag, you want to use .value.
如果您想要输入标签的值，您需要使用.value.
回答by John Green
Complete edit.
完成编辑。
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
好的，我知道你在找什么了。首先，您必须修复您的 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 (in Jquery, for brevity):
JavaScript（在 Jquery 中，为简洁起见）：
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
回答by mr_eclair
You have closed the Input tagimproperly with </input>this should be
你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/>
