Как изменять цвет выбранного блока?

Question

Как изменить цвет выбранного блока, чтобы после клика на блок менялся цвет всего блока?

Я пытался сделать через .option input:checked + span но это меняет только цвет текста, а не блока

function checkAnswer() {
  const answerElements = document.getElementsByName('answer');
  let selectedAnswer = null;

  for (const element of answerElements) {
    if (element.checked) {
      selectedAnswer = element.value;
      break;
    }
  }

  if (selectedAnswer === 'js') {
    alert('Правильный ответ! Вы изучаете JavaScript.');
  } else {
    alert(selectedAnswer);
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.quiz-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 400px;
  text-align: center;
}

.question {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333333;
}

.options {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.option {
  margin: 10px 0;
  padding: 15px;
  border: 1px solid #007bff;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}

.option span {
  font-size: 16px;
  color: #555555;
  flex-grow: 1;
  padding-left: 10px;
  cursor: pointer;
}

.option:hover {
  background-color: #e6f7ff;
}

.option input {
  display: none;
  /* Скрыть стандартные радиокнопки */
}

.option input:checked+span {
  font-weight: bold;
  background-color: #33ff52;
}

.submit-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 18px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #0056b3;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Тестовая страница</title>
</head>

<body>

  <div class="quiz-container">
    <div class="question" id="question">Какой язык программирования вы изучаете?</div>

    <div class="options">
      <label class="option">
            <input type="radio" name="answer" value="html">
            <span>HTML</span>
        </label>
      <label class="option">
            <input type="radio" name="answer" value="css">
            <span>CSS</span>
        </label>
      <label class="option">
            <input type="radio" name="answer" value="js">
            <span>JavaScript</span>
        </label>
    </div>

    <button class="submit-btn" onclick="checkAnswer()">Проверить ответ</button>
  </div>

</body>

</html>

Answer 1

хотел было снова напомнить про наличие у <label> атрибута for... а потом...

function checkAnswer() {
  const answerElements = document.getElementsByName('answer');
  let selectedAnswer = null;

  for (const element of answerElements) {
    if (element.checked) {
      selectedAnswer = element.value;
      break;
    }
  }

  if (selectedAnswer === 'js') {
    alert('Правильный ответ! Вы изучаете JavaScript.');
  } else {
    alert(selectedAnswer);
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.quiz-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 400px;
  text-align: center;
}

.question {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333333;
}

.options {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.option {
  margin: 10px 0;
  padding: 0;  /* !!! */
  border: 1px solid #007bff;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}

.option span {
  font-size: 16px;
  color: #555555;
  flex-grow: 1;
  padding-left: 10px;
  cursor: pointer;
  padding: 15px;  /* !!! */
}

.option:hover {
  background-color: #e6f7ff;
}

.option input {
  display: none;
  /* Скрыть стандартные радиокнопки */
}

.option input:checked+span {
  font-weight: bold;
  background-color: #33ff52;
}

.submit-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 18px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #0056b3;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Тестовая страница</title>
</head>

<body>

  <div class="quiz-container">
    <div class="question" id="question">Какой язык программирования вы изучаете?</div>

    <div class="options">
      <label class="option">
            <input type="radio" name="answer" value="html">
            <span>HTML</span>
        </label>
      <label class="option">
            <input type="radio" name="answer" value="css">
            <span>CSS</span>
        </label>
      <label class="option">
            <input type="radio" name="answer" value="js">
            <span>JavaScript</span>
        </label>
    </div>

    <button class="submit-btn" onclick="checkAnswer()">Проверить ответ</button>
  </div>

</body>

</html>

та да! ловкость рук и никакого :has()а

Answer 2

Разметка у Вас правильная, а вот стили можно поправить. Например, убрать лишние отступы, а блок с текстом растянуть с помощью justify-items: stretch, задействовав grid вместо flex.

Также можно немного подсократить скрипт проверки.

function checkAnswer() {
  const selectedAnswer = document.querySelector('[name="answer"]:checked')?.value || null;
  alert((selectedAnswer === 'js') ? 'Правильный ответ! Вы изучаете JavaScript.' : selectedAnswer);
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
}

.quiz-container {
  width: 400px;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.question {
  margin-bottom: 20px;
  font-size: 20px;
  color: #333333;
}

.options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.option {
  display: grid;
  place-items: center stretch;
  border: 1px solid #007bff;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.3s;
}

.option input { display: none; }

.option span {
  padding: 15px;
  font-size: 16px;
  color: #555555;
  cursor: pointer;
}
.option input:checked + span {
  font-weight: bold;
  background-color: #33ff52;
}
.option:hover span { background-color: #e6f7ff; }

.submit-btn {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  color: #ffffff;
  background-color: #007bff;
  cursor: pointer;
}
.submit-btn:hover { background-color: #0056b3; }

<div class="quiz-container">
  <div class="question" id="question">Какой язык программирования вы изучаете?</div>

  <div class="options">
    <label class="option">
      <input type="radio" name="answer" value="html">
      <span>HTML</span>
    </label>
    <label class="option">
      <input type="radio" name="answer" value="css">
      <span>CSS</span>
    </label>
    <label class="option">
      <input type="radio" name="answer" value="js">
      <span>JavaScript</span>
    </label>
  </div>

  <button class="submit-btn" onclick="checkAnswer()">Проверить ответ</button>
</div>

БЛОГ НА HUSL

Как изменять цвет выбранного блока?

Ответы (2 шт):