I am adding interactivity to a form.
A user will select, via checkboxes, activities that they would like to do.
If a user selects an activity that has a time clash with another. Then that other checkbox will be disable.
I don't want to use jQuery for this.
I am having trouble trying to implement this. The error says it cannot read property 'checked' of null?
What am I doing wrong here? I have tried, mixing up whether I'm trying to call upon values, check properties and have tried quite a few attempted solutions but to no avail.
Here is the html:
<fieldset class="activities">
<legend>Register for Activities</legend>
<label><input type="checkbox" name="all"> Main Conference — $200</label>
<label><input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
<label><input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100</label>
<label><input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100</label>
<label><input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100</label>
</fieldset>
Here is the JavaScript:
// Register for Activities section of the form.
document.querySelector(".activities").addEventListener("change", function(){
var main = document.querySelector("all").checked;
var framework = document.querySelector("js-frameworks").checked;
var libs = document.querySelector("js-libs").checked;
var express = document.querySelector("express").checked;
var node = document.querySelector("node").checked;
var build = document.querySelector("build-tools").checked;
var npm = document.querySelector("npm").checked;
// If the user selects a workshop, don't allow selection of a workshop at the same date and time -- you should disable the checkbox and visually indicate that the workshop in the competing time slot isn't available.
if(framework == true) {
express.disabled = true;
} else if(express == true) {
framework.disabled = true;
} else if(libs == true) {
node.disabled = true;
} else if(node == true) {
libs.disabled = true;
}
// When a user unchecks an activity, make sure that competing activities (if there are any) are no longer disabled.
if(!framework.checked) {
express.disabled = false;
} else if(!express.checked) {
framework.disabled = false;
} else if(!libs.checked) {
node.disabled = false;
} else if(!node.checked) {
libs.disabled = false;
}
});
Aucun commentaire:
Enregistrer un commentaire