Как изменить цвет текста по нажатию на радио кнопку?

Question

[raf060996]

Имеется радио инпут

<label class="radio-label"><input id="yniverr" name="raz15" type="radio" value="5000"><span class="radio-text">РадиоКнопка</span></label>

и какой - то блок с текстом, допустим такой:

<div class="tarifcheckbox"><span class="razprice">3 000</span></div>

Задача: Если Радио кнопка активна, меняется цвет текста span
Получилось подобное:

var yniverrr = document.getElementById('yniverr')
var razpricee = document.getElementsByClassName('tdprice');
if(yniverr.checked){razpricee.style.color='#c6c6c6';}

Ничего не меняется, как быть? Что я делаю не правильно?

Answer 1

[Денис Васильев]

У вас в условии проверяется, выбрана кнопка или нет. Этот условие сработало, если бы у инпута стоял атрибут checked. А если вам нужно при клике на инпут проверять отмечен он или нет, то нужно на инпут повесить обработчик события changeили input. И внутрь этого обработчика поместить условие.

Во пример, заменил радиокнопку на чекбокс для простоты
https://codepen.io/corvus-007/pen/YJpYQP?editors=1010

Answer 2

[dollar]

Откройте консоль в браузере - там будет ошибка и её описание, скорее всего.

Будучи телепатом, сразу вижу, что getElementsByClassName возвращает массив.

var razpricee = document.getElementsByClassName('tdprice')[0];

А на будущее научитесь отлаживать скрипты.
Например, банально использовать console.log:

var yniverrr = document.getElementById('yniverr')
console.log("yniverrr = ",yniverrr)
var razpricee = document.getElementsByClassName('tdprice')[0];
console.log("razpricee = ",razpricee)
console.log("checked? ",yniverr.checked);
if(yniverr.checked){razpricee.style.color='#c6c6c6';}

В таком духе. Шаг за шагом можно найти ошибку. Может быть, у вас скрипт вообще в header и выполняется до создания элементов, тогда у вас к ним нет доступа.