Почему при выкладывании в openserver не работает javascript?

Question

[Иван Никифоров]

Добрый день! Сегодня выложил на openserver опросник и в js прописан код, что при не правильных вариантов горел красный label, если правильный зелёный label. Только openserver это не замечает что ли. Когда просто проверяю опросник, то маркеры работают. Помогите пожалуйста!

Comments

[smilingcheater]

Без кода? без какого-то примера? без структуры файлов? без конфига? без консоли браузера?
Хорошо, ожидайте бригаду телепатов.

[Иван Никифоров]

Извините, что не выложил код

<form method="POST" action= "action_handler.php" id="form">
    <section class="table_1">
        <table class="iksweb">
            <tbody>
                <tr>
                    <td rowspan="3"><b>История компании «Mc donald's»</b>
                        <h3 class="the">Кто основал компанию «Mc donald's»?</h3>   
                        <section class="conteiner">
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i6" value="0" name="formDoor[]">
                                <label for="i6" tabindex="12">Роналд Макдоналд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i7" value="0" name="formDoor[]">
                                <label for="i7" tabindex="13">Рэй Крок</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_68" value="1" name="formDoor[]">
                                <label for="checkbox_68" tabindex="14">Братья Дик и Мак Макдоналд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_170" value="0" name="formDoor[]">
                                <label for="checkbox_170" tabindex="14">Клинт Иствуд</label>     
                            </div>
                            <div class="out-block out-6"></div>
                        </section>
                     </td>     
                </tr>
            </tbody>
        </table>
    <div class="dsw">
        <button class="b-6" tabindex="11" id="btn-1" type="submit" name="formSubmit">Отправить</button>
    </div>  
</form>

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

function onSubmit (event) {
  event.preventDefault()

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

  // Проверяем выбран ли хотябы один ответ
  if (!listCheckbox.some(checkbox => checkbox.checked)) {
    alert('Вы не выбрали ни одного ответа')
  }
  
  else{
    form.addEventListener('submit', onSubmit)
    alert('Вы подтверждаете действие?');
  }
  // Узнаем сколько всего правильных ответов
  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}`)*/
 
  //Вывод ответа с процентами
  console.log(`Процент правильных ответов: ${(rightAnswers / rightAnswersCount) * 100}`)
  /*console.log(`Процент неправильных ответов: ${(wrongAnswer / wrongAnswerCount) * 100}`)*/

}

/* Скрипт правильных и неправильных ответов */
let button = document.getElementById('btn-1');
button.addEventListener('click', function(e) {
  document.querySelectorAll('.i-6').forEach(item => {
    let chekcbox = item.closest('div');
    if (item.checked && Number(item.value)) {
      chekcbox.classList.add("right");
      chekcbox.classList.remove("false");
    } else if (item.checked) {
      chekcbox.classList.add("false");
      chekcbox.classList.remove("right");
    } else {
      chekcbox.classList.remove("right");
      chekcbox.classList.remove("false");
    }
  })
});

/*Подсвечивание правильных и неправильных ответов*/
.right {
    background-color: #33CC00;
    border-radius: 50px;
 }
.false {
    background-color: #FF3300;
    border-radius: 50px;
 }