mercredi 31 août 2016

Why can't I check if my checkboxes have been checked?

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