单击时更改按钮颜色并单击其他按钮时隐藏的内容答案

【问题标题】：What to change the button color when clicked and hide when other one is clicked单击时更改按钮颜色并单击其他按钮时隐藏的内容
【发布时间】：2021-12-01 09:17:04
【问题描述】：

These Buttons are from the single html field

function fn2() {
  if (document.querySelectorAll('#button_input').clicked) {
    document.querySelectorAll('#button_input').style.backgroundColor = "blue";
  }
}

<button id="button_input" onclick=" fn2()">
  <input class="quiz-panel-input" type="radio" name="{{ q_identifier }}" id="{{ a_identifier }}" value="{{ a_identifier }}" data-answer-trigger>
  <label class="quiz-panel-label" for="{{ a_identifier }}">{{ answer }}</label>
</button

【问题讨论】：

您不能将input 嵌套到button 中，这本来就是无效的HTML。
什么颜色？文字颜色？如果是这样element.style.color = “newColor”
但它在 HTML 方面工作得很好。如果我单击按钮，则需要更改背景颜色。

标签： javascript css shopify

【解决方案1】：

也许这就是你想要的？

function fn2() {
  document.querySelector("button").style.backgroundColor = "blue";
}

<button id="button_input" onclick="fn2()">
  <input class="quiz-panel-input" type="radio" name="{{ q_identifier }}" id="{{ a_identifier }}" value="{{ a_identifier }}" data-answer-trigger>
  <label class="quiz-panel-label" for="{{ a_identifier }}">{{ answer }}</label>
</button>

【讨论】：

使用这个输入字段的第一件事就是我有很多按钮。如果选择其他按钮，则先前选择的按钮应自动变为正常。