Так что я только что задал тот же вопрос несколько минут назад с jQuery, прежде чем узнать, что клиент не хочет jQuery в своем проекте.

Поэтому я хочу изменить цвет фона блока, когда нажата радиокнопка, которая находится внутри блока. Только с чистым Javascript, пожалуйста.

Вот код, который я до сих пор не знаю, почему он не работает.

<style>
  .radio-active {
    background-color: $primaryColor;
    color: $whiteColor;
  }
</style>

<ul>
  <li id="label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

<script>
  function changeColor() {
    document.getElementById('label').className += "radio-active";
    console.log('hiiiiiiiii');
  }

  function init() {
    document.getElementById("rad").onclick = changeColor;
  }

  window.onload = init();
</script>
1
BeeLee 31 Авг 2017 в 19:53

4 ответа

Лучший ответ

Возможно, ваша функция init запущена до визуализации элементов, потому что вы вызываете функцию, а не просто назначаете ее в качестве обратного вызова для window.onload.

Так что window.onload = init(); должен стать window.onload = init;

Изменить . Также может быть, что ваш CSS не работает (тихо), поскольку переменные цвета (например, $primaryColor) нигде не объявлены. Попробуйте использовать обычные цвета, такие как red, blue.

И стили могут быть не видны по другим причинам. Попробуйте использовать более экстремальное правило стиля, например display: none;.

Кроме того, как сказал kukkuz, добавление класса (className += "radio-active") следует выполнять только с помощью {{ X1}} не += или используя их метод (если вы хотите переключаться вперед и назад).

1
jonahe 31 Авг 2017 в 17:27
<style>
  .radio-active {
    background-color: red;
    color: white;
  }
</style>

<ul>
  <li id="my_label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

<script>
  var changeColor = function() {
     document.getElementById("my_label").classList.add("radio-active");
  }

</script>
0
kjonach 31 Авг 2017 в 18:34

Вы добавляете к атрибуту class, и после двойного щелчка он становится:

radio-activeradio-active

Вместо этого вы можете переключить classList - см. Демонстрацию ниже:

Обратите внимание, что я использую checkbox здесь, так как он больше подходит для задачи здесь.

function changeColor() {
  document.getElementById('label').classList.toggle("radio-active");
}

function init() {
  document.getElementById("rad").onclick = changeColor;
}

window.onload = init();
.radio-active {
  background-color: lightblue;
  color: white;
}
<ul>
  <li id="label">
    <input id="rad" type="checkbox" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>
1
kukkuz 31 Авг 2017 в 16:57

Вы можете упростить ваш код следующим образом:

function changeColor() {
  document.getElementById('label').className += "radio-active";
}
.radio-active {
  background-color: black;
  color: white;
}
<ul>
  <li id="label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

Если вы просто хотите использовать JS и вообще не использовать CSS, вы можете установить cssString следующим образом:

function changeColor() {
  var cssString = 'background-color: black; color: white;'
  document.getElementById("label").style.cssText = cssString;
}
<ul>
  <li id="label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>
0
Dan Kreiger 31 Авг 2017 в 17:17