Как проверить флажок если он не нажат

292

28 августа 2021, 21:10

Я сделала мини тест на js, на язык не обращайте внимания, в value находятся баллы, если правильно угадал то добавляется 1 балл.

var Div = document.getElementsByClassName("textOut")[0]; 
 
function f1() { 
  var input = document.getElementsByName("color"); 
  for (var i = 0; i < input.length; i++) { 
    if (input[i].type == "radio" && input[i].checked) { 
      var a1 = input[i].value; 
      var a2 = Number(a1); 
 
    } else { 
      a2 = 0; //если input не нажат, тогда ответ будет равен нулю. 
    } 
  } 
  var result = a2; 
  Div.innerHTML = result; 
}

<label><input type="radio" value="1" name="color"/><i></i><span class="answer">Zelená</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Červená</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Černá</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Nevím</span></label><br/> 
<button onclick="f1()">Výsledky</button> 
 
<div id="output"><span class="textOut"></span></div>//Тут будет количество набранных баллов

Я хочу что бы когда я не выбрала никакой из вариантов, или же выбрала но не правильный, в диве output был ноль, точнее ноль баллов, ноль там конечно появляется, но когда я делаю Правильный выбор, в диве output всё равно появляется число 0, а должно было 1. Как это решить и в чем моя ошибка? Благодарю за ранее.

Answer 1

Вот вариант попроще вашего :

var div = document.getElementsByClassName("textOut")[0] 
 
function f1() { 
  // ищем нужный нам "отмеченый" инпут 
  const selected = document.querySelector('input[type="radio"]:checked') 
  // выставляем значение в диве, если отмеченого инпута нету, то 0 
  div.innerHTML = selected ? selected.value : 0 
}

<label><input type="radio" value="1" name="color"/><i></i><span class="answer">Zelená</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Červená</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Černá</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Nevím</span></label><br/> 
<button onclick="f1()">Výsledky</button> 
 
<div id="output"><span class="textOut"></span></div>//Тут будет количество набранных баллов

const div = document.getElementsByClassName("textOut")[0] 
const names = [...document.querySelectorAll('input[type="radio"]')] 
  .map(e => e.name) 
  .filter((v, i, s) => s.indexOf(v) === i) 
 
function f1() { 
  let result = 0 
  names.forEach(n => { 
    // ищем нужный нам "отмеченый" инпут 
    const selected = document.querySelector(`input[type="radio"][name="${n}"]:checked`) 
    // выставляем значение в диве, если отмеченого инпута нету, то 0 
    result += selected ? +selected.value : 0 
  }) 
  div.innerHTML = result 
}

<label><input type="radio" value="1" name="color"/><i></i><span class="answer">Zelená</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Černá</span></label><br/> 
<label><input type="radio" value="0" name="color"/><i></i><span class="answer">Nevím</span></label><br/> 
 
<hr /> 
 
<label><input type="radio" value="0" name="radio2"/><i></i><span class="answer">wrong</span></label><br/> 
<label><input type="radio" value="1" name="radio2"/><i></i><span class="answer">right</span></label><br/> 
<label><input type="radio" value="0" name="radio2"/><i></i><span class="answer">wrong</span></label><br/> 
 
<hr /> 
 
<button onclick="f1()">Výsledky</button> 
 
<div id="output"><span class="textOut"></span></div>//Тут будет количество набранных баллов

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

ошибка Uncaught SyntaxError: Unexpected token 'delete'

Мне нужно сделать функцию, которая бы удаляла из верстки элементы корзиныДля этого пишу такой код:

181

javascript

Как получить доступ к содержимому iframe?

На странице имеется iframe, находящийся в одной папке вместе с родителемВнутри iframe имеется поле для ввода

c++

Итератор изменяет свое значения

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

206

c++

C++ - Создание типа конкретного размера

У меня есть необходимость хранить значение цвета в формате 0xAARRGGBB, то есть, нужен тип, занимающий 4 байтаЯ использую unsigned int, но, насколько знаю,...

252