如何使用javascript更改特定单选按钮选项的颜色？

我正在使用JavaScript创建测验应用程序。当用户根据答案点击输入按钮时，我想改变输入按钮的颜色。如果答案是正确的，则需要将颜色更改为红色；如果答案是错误的，则需要将颜色更改为红色。每个问题只需选择一个选项。如果用户选择了一个选项，则需要高亮显示绿色或红色。如果是红色，则需要突出显示绿色。不应让用户每次都有机会单击选项以查看哪个选项是正确的

Html:

  <label class="option"><input type="radio"  name="option" value="1" onclick="check()"/> <span id="opt1"></span></label>
    <label class="option"><input type="radio" name="option" value="2" onclick="check()" /> <span id="opt2"></span></label>
    <label class="option"><input type="radio" name="option" value="3" onclick="check()"/> <span id="opt3"></span></label>
    <label class="option"><input type="radio" name="option" value="4" onclick="check()"/> <span id="opt4"></span></label>
<button id="nextButton" class="next-btn" onclick="loadNextQuestion();">Next </button>

我刚刚写了 document.getElementsByName（'option'）.style.color=“red”** 但不起作用，它显示了错误” **未捕获类型错误：无法设置未定义的属性“颜色”

那条线怎么了？你们能帮帮我吗

这是json对象。

---

问题在于

document.getElementsByName（'option'）.style.color

试图按标记名获取元素，它返回所有匹配元素的数组，并且html中没有名为

option

的元素。 假设您想显示所选答案是否正确。如果正确，则文本显示绿色，如果答案错误，则显示红色

function check()
{
  var selectedOption = document.querySelector('input[type=radio]:checked');
  var answer = selectedOption.value;
  var parentDiv = selectedOption.parentNode;
  if(questions[currentQuestion].correct_answer == answer)
  {
    parentDiv.style.color="green";         
  } else{
    parentDiv.style.color="red";         
  }
}

另一种简单的方法是将

id

元素附加到

标签

，并将该id传递给

check

方法

<label class="option" id="option1">
   <input type="radio"  name="option" value="1" onclick="check(1, 'option1')"/> 
   <span id="opt1"></span>
</label>
<label class="option" id="option2">
  <input type="radio" name="option" value="2" onclick="check(2, 'option2')" /> 
  <span id="opt2"></span>
</label>
<label class="option" id="option3">
  <input type="radio" name="option" value="3" onclick="check(3, 'option3')"/> 
  <span id="opt3"></span>
</label>
<label class="option" id="option4">
  <input type="radio" name="option" value="4" onclick="check(4, 'option4')"/> 
  <span id="opt4"></span>
</label>

更新、禁用其余单选按钮 将所有标签包装在

div

中

<div>
<label class="option" id="option1">
   <input type="radio"  name="option" value="1" onclick="check(1, 'option1')"/> 
   <span id="opt1"></span>
</label>
<label class="option" id="option2">
  <input type="radio" name="option" value="2" onclick="check(2, 'option2')" /> 
  <span id="opt2"></span>
</label>
<label class="option" id="option3">
  <input type="radio" name="option" value="3" onclick="check(3, 'option3')"/> 
  <span id="opt3"></span>
</label>
<label class="option" id="option4">
  <input type="radio" name="option" value="4" onclick="check(4, 'option4')"/> 
  <span id="opt4"></span>
</label>
</div>

功能检查（应答，divId）
{
var parentDiv=document.getElementById（divId）；
如果（问题[currentQuestion]。正确答案==答案）
{
parentDiv.style.color=“绿色”；
}否则{
parentDiv.style.color=“红色”；
}
//用于禁用其他选项的其他代码。
const options=parentDiv.parentNode.queryselectoral（“输入[type=radio]”）；
对于（变量i=0；i

问题在于

document.getElementsByName（'option'）.style.color

试图按标记名获取元素，它返回所有匹配元素的数组，并且html中没有名为

option

的元素。 假设您想显示所选答案是否正确。如果正确，则文本显示绿色，如果答案错误，则显示红色

function check()
{
  var selectedOption = document.querySelector('input[type=radio]:checked');
  var answer = selectedOption.value;
  var parentDiv = selectedOption.parentNode;
  if(questions[currentQuestion].correct_answer == answer)
  {
    parentDiv.style.color="green";         
  } else{
    parentDiv.style.color="red";         
  }
}

另一种简单的方法是将

id

元素附加到

标签

，并将该id传递给

check

方法

<label class="option" id="option1">
   <input type="radio"  name="option" value="1" onclick="check(1, 'option1')"/> 
   <span id="opt1"></span>
</label>
<label class="option" id="option2">
  <input type="radio" name="option" value="2" onclick="check(2, 'option2')" /> 
  <span id="opt2"></span>
</label>
<label class="option" id="option3">
  <input type="radio" name="option" value="3" onclick="check(3, 'option3')"/> 
  <span id="opt3"></span>
</label>
<label class="option" id="option4">
  <input type="radio" name="option" value="4" onclick="check(4, 'option4')"/> 
  <span id="opt4"></span>
</label>

更新、禁用其余单选按钮 将所有标签包装在

div

中

<div>
<label class="option" id="option1">
   <input type="radio"  name="option" value="1" onclick="check(1, 'option1')"/> 
   <span id="opt1"></span>
</label>
<label class="option" id="option2">
  <input type="radio" name="option" value="2" onclick="check(2, 'option2')" /> 
  <span id="opt2"></span>
</label>
<label class="option" id="option3">
  <input type="radio" name="option" value="3" onclick="check(3, 'option3')"/> 
  <span id="opt3"></span>
</label>
<label class="option" id="option4">
  <input type="radio" name="option" value="4" onclick="check(4, 'option4')"/> 
  <span id="opt4"></span>
</label>
</div>

功能检查（应答，divId）
{
var parentDiv=document.getElementById（divId）；
如果（问题[currentQuestion]。正确答案==答案）
{
parentDiv.style.color=“绿色”；
}否则{
parentDiv.style.color=“红色”；
}
//用于禁用其他选项的其他代码。
const options=parentDiv.parentNode.queryselectoral（“输入[type=radio]”）；
对于（变量i=0；i

将check函数添加到每个无线电元素的onchange事件中，然后将该无线电元素作为参数传递：

<label class="option"><input type="radio" name="option" value="1" 
onchange="check(this);" /> <span id="opt1"></span></label>

问题
AAA
BBB
CCC
DDD

将check函数添加到每个无线电元素的onchange事件中，然后将该无线电元素作为参数传递：

<label class="option"><input type="radio" name="option" value="1" 
onchange="check(this);" /> <span id="opt1"></span></label>

问题
AAA
BBB
CCC
DDD

查看此问题：也许这对您有帮助！是的，我以前看到过，但它使用for循环和input[radio]，因此在说出我需要保留/更改的内容时也会出错“document.getElementsByName（'option'）。style.color=“red”；“返回的document.getElementsByName（'option'）将是一个数组……您需要像follow document.getElementsByName（'option'）[0]那样指定索引。style.color

document.getElementsByName（'option'）

返回一个数组而不是一个元素。因此，您需要像这样指定一个索引

document.getElementsByName（'option'）[index]

访问数组中的特定元素。它表示未定义，因为数组没有样式属性。@PavanaSriPalepu您必须为此打开一个新的StackOverflow问题。查看此问题：可能这对您有帮助！是的，我以前见过，但它使用for循环和输入[radio]因此，在“document.getElementsByName（'option'）.style.color=“red”这一行中说出我需要保留/更改的内容时，也会出现错误；“返回的document.getElementsByName（'option'）将是一个数组……您需要像follow document.getElementsByName（'option'）[0]那样指定索引。style.color

document.getElementsByName（'option'）

返回一个数组而不是一个元素。因此，您需要像这样指定一个索引

document.getElementsByName（'option'）[index]

访问数组中的特定元素。它表示未定义，因为数组没有样式属性。@PavanaSriPalepu您必须为此打开一个新的StackOverflow问题。您能否解释当用户已经选择了一个选项时，如何限制用户选择其他选项？如何编写代码？您可以禁用其余的radio通过添加

disabled

属性来设置问题的按钮。如何显示代码我想要该代码可以用disabled选项替换代码sonu请帮助我！！！好的！我会更新我的答案以获得这部分内容。实际上，你要将文本向右分解为绿色和红色，但我想要背景色不需要o根据Philip代码进行更改！！？当用户已经选择了一个选项时，您能否解释如何限制用户选择其他选项？如何编写代码？您可以通过添加

---

• [html]相关文章推荐

• Html 必须放在一条水平线上的图像数组（带滚动） htmlcss
• Html 如何在其他窗口中打开任何链接 html
• Html 在R（足球运动员）中从多个网页上的表格中抓取数据 htmlxmlrweb-scraping
• Html 使用它们进行交互是否违反输入标记语义？ html
• Html CSS翻转代码赢得'；我不在IE11工作 htmlcssinternet-explorer
• Html 移除引导导航栏折叠 htmlcsstwitter-bootstrap
• 在IE10中使用html检测IE htmlcssinternet-explorer
• Html 未知高度的浮动div后的页脚 htmlcss
• Html iOS 8.3字段集边界错误 htmlioscsssafari
• 如何在html中限制select标记中值的长度？ html
• 从HTML运行CGI脚本 html
• Html 为什么IE7和其他浏览器中的复选框不一样？ htmlcssinternet-explorer
• 如何从WKWebView加载本地化html文件？ htmliosobjective-c
• Html 当侧栏滚动结束时，防止content div滚动 htmlcss
• Html “奇怪的缓存行为”；临时标题显示为“；镀铬的？ htmlgoogle-chromecachinggoogle-chrome-devtools
• Html 内部分页符在我的打印中不起作用 htmlcss
• 解析本地html文件中的阿拉伯语文本 htmlpython-3.x
• Html 如何在主体图像上方放置标题图像 htmlcssimage
• Html CSS特性问题 htmlcss
• Html 显示数据库中的文本注释数据，并对其进行修改，以使用NodeJs和MySql再次保存它们 htmlmysqlnode.jsexpress

---

• 随机文章推荐

• Elasticsearch 如何在Kibana-ClassCast异常中随时间绘制字段的不同值 logstashkibana
• 如何修复此代码异常错误elasticsearch logstashkibana
• Elasticsearch 如何使FacetFilter正常工作？ logstashnest
• Logstash 我怎么能把空行放在日志库里 logstash
• Elasticsearch Logstash collectd编解码器从collectd获取空消息 logstash
• Logstash _带麋鹿的沼泽地 logstash
• Logstash无法向Graylog发送消息 logstash
• Elasticsearch 如何从文本文件行解析logstash/grok中的json？ logstash
• Logstash 带有多个卡夫卡主题输入的日志存储 logstash
• 在Logstash中将日期转换为UNIX时间 logstash
• Elasticsearch 在ElastAlert中比较上周同一小时的数据 logstash
• 重试logstash输出elasticsearch的单个操作错误 logstash
• Grok模式在Grok调试器中工作，但在logstash配置中不工作 logstash
• Logstash似乎更改了Elasticsearch输出URL logstash
• 如何避免elasticsearch重复文档 logstash
• Elasticsearch 如果类型条件不工作，则记录 logstash
• Logstash 用于选择和格式化某些日志行的Grok筛选器 logstash
• Logstash 无法从日志存储中读取文件 logstash
• Logstash jdbc_static：获取一个我没有编写的sql语法错误 logstash
• 重试Logstash Http输出中的非幂等项 logstash