Develop Reference

Add class to DIV element when quiz answer is correct or incorrect

I am trying to add a CSS class to a JavaScript created element, but am experiencing a reference error for the trackerMarker element. The tracker-marker DIVs are displaying on load, but are undefined when used in conjunction with the event listener.
I have tried using the createElement function inside and outside of the for loop.
I am not sure where the issue is. I am learning JS as I go, so any tips or suggestions are greatly appreciated.
function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();
.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}
<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

You never set trackerMarker inside runQuiz.
I used getElementsByClassName (because how you wrote your code) which will return an array of items which is not ideal. You should add an ID to your trackerMarker div and then use getElementById.
function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
let trackerMarker = document.getElementsByClassName('tracker-marker')[0];
// ^-- I added this line only
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();
.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}
<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

Why my functionality doesn't work after conditionally innerHTML?

I have a few checkboxes which represent subjects. And I have two custom(radio) select. I want to change innerHTML of my first select due to checkbox:checked length. If selected chekboxes length less than 3 I want to render different select options else another select options. When page load it works fine but after recheck my checkboxes I can not select any option from my first chekbox. Can someone please look at and help me
codepen link is also here
function subjectChange (){
var subjectName = document.getElementsByName('subject-name');
var questionSel = document.getElementsByClassName('options-container')[0];
var checkBoxlength = 0;
for(var i = 0; i < subjectName.length; i++) {
if(subjectName[i].checked){
checkBoxlength++
}
}
if(checkBoxlength <= 3) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
`;
} else if(checkBoxlength >= 4) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" checked>
<span>15</span>
</label>
`;
}
}
const selectBox = document.querySelectorAll('.select-box')
for(var i = 0; i < selectBox.length; i++) {
const selected = selectBox[i].querySelector('.selected');
const optionsContainer = selectBox[i].querySelector('.options-container');
const optionList = selectBox[i].querySelectorAll('.option');
selected.addEventListener('click', function(){
optionsContainer.classList.toggle("active");
})
optionList.forEach( o => {
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
o.addEventListener('click', function(){
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
optionsContainer.classList.remove('active')
var firstOptionList = document.querySelector('input[type="radio"]:checked');
var secondOptionList = document.querySelectorAll('.radio.second');
secondOptionList.forEach(e => {
e.removeAttribute('checked')
if(e.value == (firstOptionList.value * 2)){
//e.checked = true;
e.setAttribute('checked','');
var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
const selectedTwo = document.getElementsByClassName('selected');
optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
console.log(e)
}
})
})
})
}
.select-box {
display: flex;
flex-direction: column;
width: 400px;
}
.select-box .options-container {
background: cornflowerblue;
color: white;
max-height: 0;
width: 100%;
opacity: 0;
transition: all .3s;
border-radius: 8px;
overflow: hidden;
order: 1;
}
.selected {
background: cornflowerblue;
color: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
}
.selected::after {
content: '';
background: url('./arrow-down.svg');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 18px;
right: 10px;
top: 40%;
transform: all .3s;
}
.select-box .option {
display: flex;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box span {
cursor: pointer;
}
.select-box .option:hover {
background: crimson;
}
.select-box .option .radio {
display: none;
}
.select-box .options-container.active {
max-height: 200px;
opacity: 1;
overflow-y: scroll;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(-180deg);
top: -40%;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: green;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: red;
border-radius: 0 8px 8px 0;
}
<div class="subject-container">
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox1" checked />
<label for="checkbox1">USA</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox2" checked />
<label for="checkbox2">Canada</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox3" checked />
<label for="checkbox3">Germany</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox4" checked />
<label for="checkbox4">France </label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox5" checked />
<label for="checkbox5">Italy</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox6" checked />
<label for="checkbox6">China</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox7" checked />
<label for="checkbox7">Japan</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox8" checked />
<label for="checkbox8">India</label>
</div>
</div>
<form action="">
<div class="select-box">
<div class="options-container">
<label class="option">
<input type="radio" class="radio first" value="5" name="question">
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question">
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" >
<span>15</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="20" name="question">
<span>20</span>
</label>
</div>
<div class="selected">Number of question</div>
</div>
<div class="select-box">
<div id="second-list" class="options-container">
<label class="option">
<input type="radio" class="radio second" value="10" name="minutes">
<span>10 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="20" name="minutes" >
<span>20 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="30" name="minutes">
<span>30 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="40" name="minutes">
<span>40 minutes</span>
</label>
</div>
<div id="selected" class="selected">Select Exam Minute</div>
</div>
<button type="submit">Submit</button>
</form>
?

In your javascript you have added eventListeners to all the select options when your page is loaded at first. But when you call the 'subjectChange' function, the innerHTMl is changed and new elements are added to your page but these new elements do not have eventListeners attached to them. You need to attach eventListeners to these elements as well. Like this :
function subjectChange (){
var subjectName = document.getElementsByName('subject-name');
var questionSel = document.getElementsByClassName('options-container')[0];
var checkBoxlength = 0;
for(var i = 0; i < subjectName.length; i++) {
if(subjectName[i].checked){
checkBoxlength++
}
}
if(checkBoxlength <= 3) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
< /label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
`;
} else if(checkBoxlength >= 4) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" checked>
<span>15</span>
</label>
`;
}
start(); //this will add eventListeners to all the elements again
}
function start(){
const selectBox = document.querySelectorAll('.select-box')
for(var i = 0; i < selectBox.length; i++) {
const selected = selectBox[i].querySelector('.selected');
const optionsContainer = selectBox[i].querySelector('.options-container');
const optionList = selectBox[i].querySelectorAll('.option');
selected.addEventListener('click', function(){
optionsContainer.classList.toggle("active");
})
optionList.forEach( o => {
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
o.addEventListener('click', function(){
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
optionsContainer.classList.remove('active')
var firstOptionList = document.querySelector('input[type="radio"]:checked');
var secondOptionList = document.querySelectorAll('.radio.second');
secondOptionList.forEach(e => {
e.removeAttribute('checked')
if(e.value == (firstOptionList.value * 2)){
//e.checked = true;
e.setAttribute('checked','');
var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
const selectedTwo = document.getElementsByClassName('selected');
optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
console.log(e)
}
})
})
})
}
}
start();

How to disable submit button before all quiz question checked?

<style>
.hide {
display:none;
}
.question {
padding: 25px;
}
input[type="radio"] {
margin-right: 10px;
}
.btton {
padding: 15px 25px;
}
</style>
<div class="questions" id="question-div">
<?php
$i=1;
echo '<div class="questions" id="question-div">
<form action="" method="POST" id="question-form">';
foreach($quiz as $r)
{
echo '<div id="div-'.$i.'" class="question'; if($i>1)echo ' hide';echo '">
<input type="hidden" class="classesID" data-id="'.$r->classesID.'" />
<input type="hidden" class="questionID" data-id="'.$r->videoquizID.'" />
<p>Question '.$i.' : <input type="hidden" name="question[]" value="'.$r->videoquizID.'" id="'.$r->videoquizID.'" />'.$r->question.'</p>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option1.'">'.$r->option1.'
</label><br/>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option2.'">'.$r->option2.'
</label><br/>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option3.'">'.$r->option3.'
</label><br/>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option4.'">'.$r->option4.'
</label><br/>
</div>';
$i++;
}
echo '<div class="btton">
Prev
Next
Submit
Skip Quiz
</div>
</form>
</div>';
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var maxq = <?php echo count($quiz); ?>;
$('.radio-inline').click(function(e) {
var id = parseInt($(this).data('id'));
if(id==1) $('.buttons').addClass('hide');
if(id!=(maxq-1))
{
$('#next').removeClass('hide');
}
var next = (id+1);
var prev = (id-1);
$('#next').data('id',next);
$('#prev').data('id',prev);
});
$('#next').click(function(e) {
var id = $(this).data('id');
$('.buttons').addClass('hide');
if(id==(maxq-1))
{
$('#submit,#prev').removeClass('hide');
}
else {$('.buttons').addClass('hide');$('#prev').removeClass('hide');}
$('.question').addClass('hide');
$('#div-'+id).removeClass('hide');
var next = id+1;
var prev = id-1;
$('#next').data('id',next);
$('#prev').data('id',prev);
});
$('#prev').click(function(e) {
var id = $(this).data('id');
$('#prev').removeClass('hide');
if(id==1)$('.buttons').addClass('hide');
$('.question').addClass('hide');
$('#div-'+id).removeClass('hide');
var next = id+1;
var prev = id-1;
$('#next').data('id',next);
$('#prev').data('id',prev);
});
</script>
In this question I have created simple quiz which is working fine but the problem is that submit button is enable if quiz option is select or not. I don't want to enable my submit button before all quiz option check. Once all question option check then submit button enable. So, How can I do this? Please help me.
Thank You

Apart the duplicated IDs I wuold suggest to use a change event handler on radio buttons and count if the number of checked radios is the same of all div with class question.
In order to toggle the disabled class you can use .toggleClass( className, state ) :
$('#question-form :radio').on('change', function (e) {
var rChecked = $('#question-form div.question :radio:checked').length;
var divrChecked = $('#question-form div.question').length;
$('#submit').toggleClass('disabled', rChecked != divrChecked);
})
.hide {
display: none;
}
.question {
padding: 25px;
}
input[type="radio"] {
margin-right: 10px;
}
.btton {
padding: 15px 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="questions" id="question-div1">
<div class="questions" id="question-div2">
<form action="" method="POST" id="question-form">
<div id="div-1'" class="question">
<input type="hidden" class="classesID" data-id="classesID1"/>
<input type="hidden" class="questionID" data-id="videoquizID1"/>
<p>Question 1 : <input type="hidden" name="question[]" value="'videoquizID1" id="videoquizID1"/>question1
</p>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option1">option1
</label><br/>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option2">option2
</label><br/>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option3">option3
</label><br/>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option4">option4
</label><br/>
</div>
<div id="div-2'" class="question">
<input type="hidden" class="classesID" data-id="classesID2"/>
<input type="hidden" class="questionID" data-id="videoquizID2"/>
<p>Question 2 : <input type="hidden" name="question[]" value="'videoquizID2" id="videoquizID2"/>question1
</p>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option1">option1
</label><br/>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option2">option2
</label><br/>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option3">option3
</label><br/>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option4">option4
</label><br/>
</div>
<div class="btton">
Prev
Next
Submit
Skip Quiz
</div>
</form>
</div>
</div>

How to select all checkbox when i checked all check boxes

I want to select all checkbox checked when i select all checkboxes in my dropdown menu. I am a beginner js developer need help. This is my js code
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
var selectallBox = document.getElementById('selectall');
var checkBoxes = document.querySelectorAll('.select-me');
selectallBox.addEventListener('click', function() {
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i] != selectallBox)
checkBoxes[i].checked = selectallBox.checked;
}
})
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener('click', function() {
selectallBox.checked = false;
})
}
document.querySelector('.close-check-box').addEventListener('click' , function(){
checkboxes.style.display = 'none'
})
This is my js fiddle:
https://jsfiddle.net/b9ueL3fw/

You can compare the total check box with the checked check box count, if both length are same then set check box checked property to true, otherwise set to false:
var selectedCount = document.querySelectorAll('.select-me:checked').length;
if(checkBoxes.length == selectedCount){
selectallBox.checked = true;
}
else{
selectallBox.checked = false;
}
var expanded = false;
var selectBox = document.querySelector('.selectBox')
selectBox.addEventListener('click', function(){
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
});
var selectallBox = document.getElementById('selectall');
var checkBoxes = document.querySelectorAll('.select-me');
selectallBox.addEventListener('click', function() {
for (let i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i] != selectallBox)
checkBoxes[i].checked = selectallBox.checked;
}
})
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener('click', function() {
var selectedCount = document.querySelectorAll('.select-me:checked').length;
if(checkBoxes.length == selectedCount){
selectallBox.checked = true;
}
else{
selectallBox.checked = false;
}
});
}
document.querySelector('.close-check-box').addEventListener('click' , function(){
checkboxes.style.display = 'none'
})
.multiselect {
width: 400px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px rgb(169, 169, 169) solid;
padding-top: 10px;
border-radius: 5px;
margin-top: 10px;
height: 200px;
overflow-y: scroll;
}
label {
display: block;
}
select {
padding: 6px 12px;
border-radius: 5px;
}
.close-check-box:link,
.close-check-box:visited {
padding: 1px 25px;
text-decoration: none;
font-weight: 300;
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
margin-left: 14px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
}
hr.style-two {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(169, 169, 169, 0), rgba(169, 169, 169, 0.75), rgba(169, 169, 169, 0));
}
<form method="GET">
<div class="multiselect">
<div class="selectBox">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="selectall">
<input type="checkbox" id="selectall" / class="mr-3 ml-3">Select All</label>
<hr class="style-two">
<label for="one">
<input type="checkbox" name="checkbox1" value="1" id="one" / class="mr-3 ml-3 select-me">First</label>
<label for="two">
<input type="checkbox" name="checkbox2" value="2" id="two" / class="mr-3 ml-3 select-me">Second</label>
<label for="three">
<input type="checkbox" name="checkbox3" value="3" id="three" / class="mr-3 ml-3 select-me">First</label>
<label for="four">
<input type="checkbox" name="checkbox4" value="4" id="four" / class="mr-3 ml-3 select-me">Second</label>
<label for="five">
<input type="checkbox" name="checkbox5" value="5" id="five" / class="mr-3 ml-3 select-me">First</label>
<label for="six">
<input type="checkbox" name="checkbox6" value="6" id="six" / class="mr-3 ml-3 select-me">Second</label>
<label for="seven">
<input type="checkbox" name="checkbox7" value="7" id="seven" / class="mr-3 ml-3 select-me">First</label>
<label for="eight">
<input type="checkbox" name="checkbox8" value="8" id="eight" / class="mr-3 ml-3 select-me">Second</label>
<label for="nine">
<input type="checkbox" name="checkbox9" value="9" id="nine" / class="mr-3 ml-3 select-me">First</label>
<label for="ten">
<input type="checkbox" name="checkbox10" value="10" id="ten" / class="mr-3 ml-3 select-me">Second</label>
<a class="close-check-box" href="#">click</a>
</div>
</div>
<button type="submit">submit</button>
</form>

var expanded = false;
var selectBox = document.querySelector(".selectBox");
selectBox.addEventListener("click", function() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
});
let checkboxesCheckedCount = 0;
var selectallBox = document.getElementById("selectall");
var checkBoxes = document.querySelectorAll(".select-me");
selectallBox.addEventListener("click", function() {
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i] != selectallBox)
checkBoxes[i].checked = selectallBox.checked;
checkboxesCheckedCount = selectallBox.checked ? checkBoxes.length : 0;
}
});
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener("click", function() {
selectallBox.checked = false;
checkboxesCheckedCount = this.checked ? checkboxesCheckedCount +1 : checkboxesCheckedCount -1
if (checkboxesCheckedCount === checkBoxes.length) {
selectallBox.checked = true;
}
});
}
document
.querySelector(".close-check-box")
.addEventListener("click", function() {
checkboxes.style.display = "none";
});
.multiselect{width:400px}.selectBox{position:relative}.selectBox select{width:100%}.overSelect{position:absolute;left:0;right:0;top:0;bottom:0}#checkboxes{display:none;border:1px #a9a9a9 solid;padding-top:10px;border-radius:5px;margin-top:10px;height:200px;overflow-y:scroll}label{display:block}select{padding:6px 12px;border-radius:5px}.close-check-box:link,.close-check-box:visited{padding:1px 25px;text-decoration:none;font-weight:300;background-color:#3498db;border:1px solid #3498db;color:#fff;margin-left:14px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin-top:10px;margin-bottom:20px;display:inline-block}hr.style-two{border:0;height:1px;background-image:linear-gradient(to right,rgba(169,169,169,0),rgba(169,169,169,.75),rgba(169,169,169,0))}
<form method="GET"><div class="multiselect"><div class="selectBox"> <select><option>Select an option</option></select><div class="overSelect"></div></div><div id="checkboxes"><label for="selectall"> <input type="checkbox" id="selectall" / class="mr-3 ml-3">Select All</label><hr class="style-two"> <label for="one"> <input type="checkbox" name="checkbox1" value="1" id="one" / class="mr-3 ml-3 select-me">First</label> <label for="two"> <input type="checkbox" name="checkbox2" value="2" id="two" / class="mr-3 ml-3 select-me">Second</label> <label for="three"> <input type="checkbox" name="checkbox3" value="3" id="three" / class="mr-3 ml-3 select-me">First</label> <label for="four"> <input type="checkbox" name="checkbox4" value="4" id="four" / class="mr-3 ml-3 select-me">Second</label> <label for="five"> <input type="checkbox" name="checkbox5" value="5" id="five" / class="mr-3 ml-3 select-me">First</label> <label for="six"> <input type="checkbox" name="checkbox6" value="6" id="six" / class="mr-3 ml-3 select-me">Second</label> <label for="seven"> <input type="checkbox" name="checkbox7" value="7" id="seven" / class="mr-3 ml-3 select-me">First</label> <label for="eight"> <input type="checkbox" name="checkbox8" value="8" id="eight" / class="mr-3 ml-3 select-me">Second</label> <label for="nine"> <input type="checkbox" name="checkbox9" value="9" id="nine" / class="mr-3 ml-3 select-me">First</label> <label for="ten"> <input type="checkbox" name="checkbox10" value="10" id="ten" / class="mr-3 ml-3 select-me">Second</label><a class="close-check-box" href="#">click</a></div></div> <button type="submit">submit</button></form>

jQuery not reacting to number input

I have this code, where if I fill in specific input fields then it will 'enable' or in this case remove a class but when it comes to filling in an input field of a number it won't react to the input value of the number what is filled. I want it to when something is filled in then enable the button.
I'm setting up a validation that when not all the fields are filled in, you can't go to the next page but before that you need to fill in all the fields.
HTML
<input id="LAMINAAT" type="radio" name="group1" onclick="myFunction()"
value="Laminaat" />
<label for="LAMINAAT">Laminaat</label>
<input id="PARKET" type="radio" name="group1" onclick="myFunction()" value="Parket" />
<label for="PARKET">Parket</label>
<input id="PVC" type="radio" name="group1" onclick="myFunction()" value="Pvc" />
<label for="PVC">PVC</label>
<hr>
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>
<div id="form_JA2" class="desc desc3" style="float: inherit;">
<h5>Hoeveel m<sup>2</sup> ondervloer wil je laten leggen?</h5>
<input type="number" id="ondervloer" name="ondervloeren">
</div>
<hr>
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()" value="Nee">
<label for="NEE3">Nee</label>
<hr>
<input id="JA4" type="radio" name="group5" value="Ja">
<label for="JA4" class="form-field__radio__label">Ja, meerprijs €5.00 per meter</label><br>
<input id="NEE4" type="radio" name="group5" onclick="JaNeeThirth()" value="Nee">
<label for="NEE4">Nee</label>
<hr>
<input id="JA5" type="radio" name="group6" value="Ja">
<label for="JA5" class="form-field__radio__label">Ja, meerprijs €2.50 per m<sup>2</sup></label><br>
<input id="NEE5" type="radio" name="group6" onclick="JaNeeFourth()" value="Nee">
<label for="NEE5">Nee</label>
<hr>
<input id="JA6" type="radio" name="group7" value="Ja">
<label for="JA6" class="form-field__radio__label">Ja, meerprijs €20.00 per deur</label><br>
<input id="NEE6" type="radio" name="group7" onclick="JaNeeFifth()" value="Nee">
<label for="NEE6">Nee</label>
<hr>
<input id="JA7" type="radio" name="group8" value="Ja">
<label for="JA7" class="form-field__radio__label">Ja, meerprijs €20.00 per plint</label><br>
<input id="NEE7" type="radio" name="group8" onclick="JaNeeSixth()" value="Nee">
<label for="NEE7">Nee</label>
<hr>
<input id="tweedebutton" type="button" value="volgende stap" onclick="show_next('user_details','qualification','bar2'); topFunction()" />
jQuery
$(document).ready(function () {
$("#tweedebutton").addClass("disabledbuttonNext");
$('input[type="radio"]').on('change', function () {
if ($('#LAMINAAT').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
$("#tweedebutton").removeClass("disabledbuttonNext");
} else if ($('#PARKET').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") && $('input[name="group6"]').is(":checked") ){
$("#tweedebutton").removeClass("disabledbuttonNext");
} else if ($('#PVC').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
$("#tweedebutton").removeClass("disabledbuttonNext");
}
else{
$("#tweedebutton").addClass("disabledbuttonNext");
}
});
});
$(document).ready(function () {
$('input[type="radio"], input[type="number"]').on('change', function () {
if ( $('#JA2').is(":checked") && $('#ondervloer').val() == '' ) {
$("#tweedebutton").addClass("disabledbuttonNext");
}
});
});
CSS
.disabledbuttonNext {
pointer-events: none;
opacity: 0.5;
}
I want the result to be when I filled in everything and I filled something in the number input(example: '1') that it reacts to it immediately and enables the button or in this case adds a class.

Here's the code similar for your application.
It interacts with both "radio buttons" as well as "input box" & accordingly triggers the "Submit button".
function checkout() {
alert("It worked");
}
$(document).ready(function() {
//console.log("Document loaded !");
$("input").change(function() {
var snacksValue = $('input[name="snacks"]:checked').val();
var extrasValue = $('input[name="extras"]:checked').val();
var quantity = $('#input1').val();
if (snacksValue != undefined && extrasValue != undefined && quantity != '') {
//console.log("go");
$('#checkout').removeClass("disabled");
$('#checkout').addClass("enabled");
} else {
//console.log("error");
$('#checkout').removeClass("enabled");
$('#checkout').addClass("disabled");
}
});
});
div {
margin: 10px 5px;
}
.enabled {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.disabled {
background-color: #e7e7e7;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
pointer-events: none;
/* display:none; */
/* If you wanna hide it */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio" name="snacks" value="burger" />
Burger</label>
<label>
<input type="radio" name="snacks" value="pizza" />Pizza</label>
<label>
<input type="radio" name="snacks" value="hotdog" /> Hotdog</label>
</div>
<div>
<label>
<input id="extra1" type="radio" name="extras" value="cheese">
With Cheese</label>
<label>
<input id="extra2" type="radio" name="extras" value="nocheese">
Without Cheese</label>
</div>
<div>
<label>Quantity</label>
<input id="input1" type="number" value="" min=1>
</div>
<div>
<input id="checkout" class="disabled" type="button" value="Next" onclick="checkout();" />
</div>