Laravel Project - problem with toggling elements in JavaScript.

Question

Good morning all, I have a conundrum for you all.

I have a project I'm making in Laravel. It's a standard photo gallery site but I'm wanting to implement filtering of images based on the checkboxes that are ticked. Click a checkbox and the images linked to a particular class will appear.

app.js

console.log("js connected");

//select photo groups  - change vars
var game_cat_botw = document.querySelectorAll(".zelda_botw");
let game_cat_lAwakening = document.querySelectorAll(".zelda-linksawakening")[0];
let game_cat_fifaOne = document.querySelectorAll(".fifa-twenty")[0];

//Select checkboxes
let toggleZeldaBreathOfWild = document.getElementById("zelda-one");
let toggleZeldaLinksAwakening = document.getElementById("zelda-two");
let toggleFifaOne = document.getElementById("fifa-one");


/** 
 * Get JSON data.
 */

jQuery.getJSON("data/all-photos-classes.json", function( catOne_data ) {
    let getcatData = catOne_data.zelda_botw.length;        

    for( let i=0; i < getcatData; i++ ) {          

        jQuery(`<img class="img" src="${ catOne_data.zelda_botw[i].img_url }" alt="${ catOne_data.zelda_botw[i].img_alt }" title="${ catOne_data.zelda_botw[i].img_alt }" />"`).appendTo(".category-photos");
    }


});


/**
 * Toggle First Category 
 */

function toggleImage(category) {

    game_cat_botw = document.querySelectorAll(".zelda_botw");

    if( toggleZeldaBreathOfWild.checked == true ) {

        console.log("images on");
        game_cat_botw.style.display = "inline-block";

    } else {

        console.log("images off");
        game_cat_botw.style.display = "none";

    }

}

I'm able to loop through the JSON data so it's part of the DOM. I'm able to write a function that reacts to a checkbox click. What I'm not able to do is affect the display property of the elements I am selecting. It keeps generating a TypeError

app.js:57 Uncaught TypeError: Cannot set property 'display' of undefined

I don't really know why. Do I have to make the toggle function a part of the loop too so I can iterate the display property change? Do I have to take the classList.add/remove approach?

home.blade.php

<?php 

    $selected = "main";
    $title = "Home | Switch Photo Library";

    $meta_title = $title;
    $meta_description = "desc goes here";
    $meta_keywords = "photography, website, pets, animals and nature, buildings, people, others";
    $meta_img = "img/photolib_preview.png";

    $page_url = "";

    $page_font = "https://fonts.googleapis.com/css?family=Merriweather|Odibee+Sans|Quicksand&display=swap";

?>

@extends('main')

@section('content') 

    <section class="main">

        <article class = "category-content">

            <h2 class = "category-heading">Content: Home</h2>

            <article class = "category-photos">

                <!-- dynamic image content - to be replaced. -->

                <!-- <img class="img zelda_botw" src="img/game-screenshot-placeholder.png" alt="#" title="#" /> -->          

            </article> 

        </article>

        <aside class="select-category">

            <h2>Select Image Category</h2>

            <article>
                <label for="zelda-one"><input type="checkbox" id="zelda-one" onclick="toggleImage()" /><p>Zelda: Breath of the Wild</p></label>

                <!--  <SNIP> - more checkboxes -->  
                <label for="footballmanagertouch"><input type="checkbox" id="footballmanagertouch" /><p>Football Manager Touch</p></label>


                <label for="all"><input type="checkbox" id="all" />ALL</p></label>
            <article>

        </aside>

    </section>

@endsection

Thanks in advance for your help! :)

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Grieve

Jonathan Grieve

Laravel Project - problem with toggling elements in JavaScript.