I have these images (self-made 'emoj's') overlayed on checkboxes so when you click one of them, you'll be taken to the next page where you can click another one. Then you`re taken to the results-page where a function runs with this idea:
if (emoji1Page1.checked && emoji2Page2.checked){
fetchApiDataEmoji1AndEmoji();
}
Emoji1 is a comic jesus drawing and emoji2 here is a timebomb drawing (this info makes it a bit more clear)
So we get this html and I'm trying to get the if statement going with this
I inserted the test to see if the images are caught but nothing, only this error
'Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')'
Any any ideas how to get this down? Thanks!
const contentEmojiChecked = document.getElementById('jesus');
const hasteChecked = document.getElementById('timebomb');
contentEmojiChecked.addEventListener('click', test);
function test(e) {
e.preventDefault();
console.log('test');
}
hasteChecked.addEventListener('click', test);
function test(e) {
e.preventDefault();
console.log('test');
}
if (contentEmojiChecked && hasteChecked) {
getRecipesForContentEmojiAndHaste()
}<label for="jesus">
<a href="secondQuestion.html" >
<img src="../../assets/Jezus button.png" class="jesus" />
<input type="checkbox" id="jesus"/>
</a>
</label>
<label for="timebomb">
<a href="result.html" >
<img src="../../assets/tijdbom.png" class="timebomb"/>
<input type="checkbox" id="timebomb"/>
</a>
</label>