[英]In JavaScript, how do I make it so hovering over the label will output in a p tag the value of the radio button?
Say I have a list with radio buttons in it. 假设我有一个带有单选按钮的列表。 How do I make it such that hovering over the label will write the value of the radio button into HTML into a
<p>
tag? 如何使鼠标悬停在标签上,将单选按钮的值写入HTML到
<p>
标记中?
So say it was: 可以这么说:
o Option One
Hovering over Option One would write the value of the radio button into a <p>
tag below. 将鼠标悬停在选项一上会将单选按钮的值写入下面的
<p>
标记中。
My code is below and it won't work. 我的代码在下面,它将无法正常工作。 It should update obviously if the user clicks a different radio button.
如果用户单击其他单选按钮,则应该明显更新。
function showDegree() {
var degreeOptions = document.getElementsByName('degree');
var degreeChoice;
var i;
for (i = 0; i < degreeOptions.length; i++) {
if (degreeOptions[i].checked) {
degreeChoice = degreeOptions[i].value;
}
}
document.getElementById('degreeOutput').innerHTML = degreeChoice;
}
You would have to use an Event, you're thinking of the word Hover
(which is mostly for styling) but in this case you need to think of the word onmouseover
(which is for actions... events). 您将不得不使用一个Event,您想到的是
Hover
这个词(主要用于样式设置),但在这种情况下,您需要考虑onmouseover
这个词(用于操作...事件)。
Let's say you have this: 假设您有以下内容:
<input type=radio value="val1">Option 1
<p id=optDisplay></p>
You would have to put in each input
the following: 您必须在每个
input
以下内容:
<input type=radio value="val1" onmouseover="document.getElementById( 'optDisplay').textContent = this.value;">Option 1
Notice that it would only happen when the mouse pointer is over the radio element, that is only the little circle, won't work if you pointer the text "Option 1". 请注意,只有当鼠标指针悬停在单选元素上方时,它才会发生,只有小圆圈,如果您将文本“选项1”指向鼠标,则不会起作用。 If you would like to accomplish that you could wrap the
input
element and the text inside another tag like a span or div
which would have to have the onmouseover
like this: 如果要完成此操作,可以将
input
元素和文本包装在另一个标签(例如span or div
,而该标签必须具有如下onmouseover
:
<span onmouseover="document.getElementById( 'optDisplay').textContent = this.firstChild.value;"><input type=radio value="val1"> Option 1</span>
The onmouseover changed a little, as for what you say about "updating" when clicking you don't have to do anything as if you click it the mouse will be over it, and as long as you don't pointer any other option it would remain like that. onmouseover改变了一点,至于您单击“更新”时所说的,您不必做任何事情,就好像您单击鼠标一样,鼠标将悬停在它上面,并且只要您不指向其他任何选项会保持那样。
It would be a little more tricky to make once clicked prevent any more changes, but thinking quickly you could for example add another event onclick
to remove the id of the <P>
then after that, if you pointer the other option they wouldn't find the <P>
, no update. 如果单击一次以阻止任何其他更改,则将变得有些棘手,但是快速考虑一下,例如可以添加另一个事件
onclick
来删除<P>
的ID,然后在此之后,如果您指针其他选项,它们将不会找到<P>
,没有更新。
try if 尝试如果
.checked == true .checked == true
or 要么
if .checked == 'checked' 如果.checked =='选中'
-- I'm sorry I'm so used to coding around jQuery that I forgot the right way to do this native... on that note, if performance isnt an issue, you might want to consider using jquery, this would be simple in jquery. -很抱歉,我习惯于围绕jQuery进行编码,以至于我忘记了执行本机的正确方法...在那一点上,如果性能不是问题,您可能要考虑使用jquery,这很简单在jQuery中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.