Помогите найти оплошность в js
Доброго времени суток! Есть такой крайне незаурядный код:
Html:
<p>Вопрос 1: Что такое HTML?</p>
<div>
<input type="radio" id="val1var1" name="val1">
<label for="val1var1">Язык гипертекстовой разметки</label>
</div>
<div>
<input type="radio" id="val1var2" name="val1">
<label for="val1var2">Каскадная таблица стилей</label>
</div>
<div>
<input type="radio" id="val1var3" name="val1">
<label for="val1var3">Популярный язык программирования</label>
<button id="but_end">Завершить</button> JS:
let val1var1=document.querySelector('#val1var1');
let val1var2=document.querySelector('#val1var2');
let val1var3=document.querySelector('#val1var3');
let end=document.querySelector('#but_end');
end.addEventListener('click', function(evt) {
let v1v1=val1var1.value;
let v1v2=val1var2.value;
let v1v3=val1var3.value;
if (v1v1.checked) {
alert('true');
}
else {
alert('false');
}
}); По какой-то причине alert всегда выводит false, в независимоси от того, что выбрано. Что именно сделано не так? Почему пункт с true не работает? Для radio нужна другая проверка?
Проблема в том, что вы проверяете значение свойства `value` у элементов `input`, а не свойство `checked`. Вместо этого вам нужно изменить код следующим образом:
javascript
end.addEventListener('click', function(evt) {
let v1v1=val1var1.checked;
let v1v2=val1var2.checked;
let v1v3=val1var3.checked;
if (v1v1) {
alert('true');
}
else {
alert('false');
}
});
Теперь код будет работать правильно и выводить `true`, если выбран первый вариант ответа и `false` в противном случае.
Потому что ты в переменную v1v1 записал value, тоесть строку. Естественно ты не можешь проверить выбран он или нет
Код подготовлен с помощью ребят из Академии Сайтов
При работе с радиокнопками и определении их состояния, используйте свойство checked, а не value. В вашем коде, вы неправильно обращаетесь к свойству checked. Вот исправленный код:
<p>Вопрос 1: Что такое HTML?</p>
<div>
<input type="radio" id="val1var1" name="val1">
<label for="val1var1">Язык гипертекстовой разметки</label>
</div>
<div>
<input type="radio" id="val1var2" name="val1">
<label for="val1var2">Каскадная таблица стилей</label>
</div>
<div>
<input type="radio" id="val1var3" name="val1">
<label for="val1var3">Популярный язык программирования</label>
</div>
<button id="but_end">Завершить</button>
let val1var1 = document.querySelector('#val1var1');
let val1var2 = document.querySelector('#val1var2');
let val1var3 = document.querySelector('#val1var3');
let end = document.querySelector('#but_end');
end.addEventListener('click', function(evt) {
if (val1var1.checked) {
alert('true');
} else {
alert('false');
}
});
Теперь при выборе первой радиокнопки (с правильным ответом) и нажатии на кнопку "Завершить", вы увидите сообщение "true". В противном случае, вы увидите сообщение "false".
Канал "Академия сайтов" по WEB программированию - Заходим и подписываемся
