Проверьте цвет текста при включенном радио - PullRequest
Новая
       7

Проверьте цвет текста при включенном радио

0 голосов
/ 05 марта 2019

Я пытаюсь изменить цвет текста для p1, когда выбран переключатель.если выбран вверх, зеленый или вниз, красный.Я могу без проблем изменить цвет радиоблока с помощью css, но не могу изменить текст. 

<form>
  <p1>Test1: </p1>
  <input type="radio" id="up" style="vertical-align: middle" name="test1" value="Up" checked> Up
  <input type="radio" id="down" style="vertical-align: middle" name="test1" value="Down"> Down
  <input type="radio" id="route" style="vertical-align: middle" name="test1" value="en route"> En route  
  <input type="radio" id="house" style="vertical-align: middle" name="test1" value="In-House"> In-House  
  <b>  Notes: </b><br>
 </form>

Ответы [ 2 ]

2 голосов
/ 06 марта 2019

добро пожаловать в переполнение стека!

Чтобы установить цвет элемента в JavaScript, вам просто нужно получить доступ к элементу, а затем получить доступ к объекту стиля и затем установить значение цвета. Как это 

<p id="changeMe">Text will change to green :)</p>
    <script>
    // Using ES5 (Ecma-Script 2015) for compatibility sake
    var elementToChange = document.querySelector("#changeMe")
    elementToChange.style.color = "green"
    </script>

Вы можете определить, установлен ли флажок в JavaScript, например, 

<input type="checkbox" id="check">
<h1 style="color: red;" id="res">Checked?</h1>
<button onclick="isChecked()">Check If Checked</button>
<script>
  function isChecked() {
  var element = document.querySelector("#check")
  var res = document.querySelector("#res")
  if(element.checked) {
    res.style.color = "green"
  }
  else {
    res.style.color = "red"
  }
  }

</script>

Так как нам здесь не нравится подавать ложку на переполнение стека, я позволю вам сложить 2 и 2 вместе. Хорошего дня!

0 голосов
/ 06 марта 2019

Если вы ищете чистое решение CSS, потому что вы не отметили его как вопрос js, вы также можете сделать это, но вам придется немного перемешать ваш HTML.Вы можете добавить любое количество радиовходов, и это будет работать до тех пор, пока после них появится элемент p.

<form>
  <input type="radio" id="up" style="vertical-align: middle" name="test1" value="Up" checked><label for="up"> Up</label>  
  <input type="radio" id="down" style="vertical-align: middle" name="test1" value="Down"><label for="down"> Down</label>
  <p class="color-me">Test1: </p>
 </form>

form {
  display: flex;
  flex-direction: row;
} 

.color-me {
  order: 1;
}

#up, #up ~ label, #down, #down ~ label {
  order: 2;
}


#up:checked ~ .color-me{
  background-color: tomato;
}

 #down:checked ~ .color-me{
   background-color: steelblue;
}
...