logo标签列表

使用innerHTML与<input>元素

javascripthtml
5

我正在尝试在input标签上使用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 vs. Phone Number），这就是为什么我试图使用单选按钮的innerHTML。

如果能得到任何帮助，我将非常感激。

5个回答
5
你应该将 input 嵌入到 label 标签中，input 标签应该以 /> 结尾。这是语义化的HTML。当你这样做时，点击标签会激活输入框，只有 label 才能使用 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

完整的编辑。

好的，我明白你在寻找什么。首先，你必须修复你的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());
}
ID是一个变量，等于单选按钮对象，它通过使用单词“this”传递。我本可以使用setName（'Last Name'）然后getElementById（ID）。 - user052211
是的，抱歉。我已经注意到这个问题并编辑了代码本身，但忘记编辑注释了。 - John Green
好的，我现在知道你在寻找什么（我想），并已相应地更新了我的答案。 - John Green
我发现我把文本放到了<input>里面，而不是<label>。我在想是否可以调用setName(this.previousSibling)并获取<label>的innerHTML？（或者类似于此的内容，我认为有一个previous sibling方法） - user052211
这段代码的作用是获取与输入ID相等的标签的FOR属性的HTML（这就是标签的工作原理）。由于FOR属性通常是唯一链接到控件的，因此这是一个很好的属性选择器解决方案。然后，它将其与字符串连接起来，并将其放入命名标签（searchtitle）的HTML中。 - John Green
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>
1
问题在于他试图获取INPUT的innerHTML，而实际上他想要的是value。 - John Green
不，我认为他真正想要的是 INPUT 的 innerHTML，因为他希望搜索标题的文本与单选按钮的标签匹配。 - tofutim
很好，它能够工作。我仍然希望知道为什么innerHTML不起作用，但是没关系，我可以通过设置ID来完成它。 - user052211
实际上，这仍然没有解决问题，因为目标是获取this。你想要获取this的父级。 - tofutim
好的，我现在明白了。此外，您可能会发现将输入包装在标签中会引起麻烦。这实际上会导致某些浏览器崩溃（尽管具体细节我现在不记得了）。 - John Green
显示剩余2条评论
1
如果您想获取输入标签的值，您需要使用 .value。
我认为他想获取的不是标签的值，而是输入框的标签。也就是说，点击单选按钮应该会将搜索标题更改为“输入姓氏”或“输入电话号码”。使用值将会给你“输入lastname”和“输入phonenumber”。 - tofutim
如果我使用.value，我得到的是我设置的电话号码或姓名值。我正在尝试访问<input>和</input>之间的文本。 - user052211
0
您未正确关闭输入标签，应为</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/>
这是XHTML格式 - 在HTML5中不再是标准了，我认为是吧？ - Jeff
我不知道那个。也许这就是我的问题。也许 <input> 没有 innerHTML。我得调查一下。 - user052211
1
不，这并不重要，您的浏览器应该可以解析它（向后兼容），但这并不能解决您的问题。我认为您是正确的，该输入框没有 innerHTML 属性。这也意味着您可以在代码中删除那些 </input> 标签。 - Jeff
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接