wakenby

document.addEventListener('click', toggleImage)

function toggleImage ({target}) {
  const buttonToggle = target.closest('[show-img-alt]')

  if (buttonToggle === null) return

  const alt = buttonToggle.getAttribute('show-img-alt')
  const allImages = document.querySelectorAll('img')

  for (const img of allImages) {
    if (img.alt !== alt) img.style.display = 'none'
    else img.style.display = ''
  }
}

function toggleImages (alt) {
  const allImg = document.querySelectorAll('img')
  
  for (const img of allImg) {
    if (img.alt !== alt) img.style.display = 'none'
    else img.style.display = ''
  }
}

function toggleImages (alt) {
  document.querySelectorAll('img').forEach(img => img.style.display = 'none')
  document.querySelectorAll(`img[alt="${alt}"]`).forEach(img => img.style.display = '')
}

function testBtn(event) {
  if (event.target.id !== 'btn') return

  let answer = prompt('Число?')

  if (answer === null) return
  if (answer.trim() === '') return alert('Вы ничего не ввели')
  if (!isNumeric(answer)) return alert('Введите число')

  answer = Number(answer)

  if (answer < 1) console.log(`Меньше единицы: ${answer}`)
  else if (answer > 0) console.log(`Больше нуля: ${answer}`)

  function isNumeric (n) {
    return !isNaN(parseFloat(n)) && isFinite(n)
  }
}

const form = document.querySelector('#form')
form.addEventListener('submit', onSubmit)

function onSubmit (event) {
  event.preventDefault()

  let listCheckbox = document.querySelectorAll('.i-6')
  listCheckbox = [...listCheckbox]

  // Проверяем выбран ли хотябы один ответ
  if (!listCheckbox.filter(checkbox => checkbox.checked)) {
    return console.log('Вы не выбрали ни одного ответа')
  }

  // Узнаем сколько всего правильных ответов
  const rightAnswersCount = listCheckbox.filter(checkbox => Number(checkbox.value) === 1).length

  // Узнаем сколько всего не правильных ответов
  const wrongAnswerCount = listCheckbox.length - rightAnswersCount

  // Узнаем количество правильных ответов
  const rightAnswers = listCheckbox.filter(checkbox => Number(checkbox.value) === 1 && checkbox.checked).length

  // Узнаем количество не правильных ответов
  const wrongAnswer = listCheckbox.filter(checkbox => Number(checkbox.value) === 0 && checkbox.checked).length

  // Уведомляем пользователя
  console.log(`Вы ответили правильно на ${rightAnswers} из ${rightAnswersCount}`)
  console.log(`Вы ответили не правильно на ${wrongAnswer} из ${wrongAnswerCount}`)
}

.block {
  background-color:black;
}

.block .box {
  background-color:white;
}