So I am trying to render different select boxes based upon the current value of another select box. The first select box is for a film name, and then the second select box shows the showings for that specific film. I could conditionally render the options inside, however, I just want to render the div as a whole.
I am doing this using the django framework. The code will produce something like this:
<div hidden id="Ice Age">
... Select box and options
</div>
<div hidden id="James Bond">
... Select box and options
</div>
I then want to access this div and remove the hidden tag, displaying the select box. I am however having issues with my javascript, as I cannot use query selector on the item, as the IDs are created conditionally.
Here is my attempt:
filmSelection.addEventListener('change', (event) => {
const filmSelectionTemp = document.querySelector('#film'); // Get the film drop down
let temp = '#' + event.target.value // Create the ID of the currently selected film
const result = document.querySelector(temp); // Select that div
result.classList.remove('hidden') // Remove hidden tag
})
This tells me : Uncaught TypeError: Cannot read properties of null (reading 'classList')
Not really sure what is going on.
New to javascript so pls be nice 🙂