JS Ignoring my if condition

I'm trying to add the value of a selected radio button to a span after clicking a submit button. Here's what my HTML looks like
<div class="ratings">
<div>
<input type="radio" id="one" name="rating" value="1">
<label for="one" class="rating"><span class="rating__content">1</span></label>
</div>

<div>
<input type="radio" id="two" name="rating" value="2">
<label for="two" class="rating"><span class="rating__content">2</span></label>
</div>
</div>
<button class="button" id="submit-button">Submit</button>
</div>
<div class="ratings">
<div>
<input type="radio" id="one" name="rating" value="1">
<label for="one" class="rating"><span class="rating__content">1</span></label>
</div>

<div>
<input type="radio" id="two" name="rating" value="2">
<label for="two" class="rating"><span class="rating__content">2</span></label>
</div>
</div>
<button class="button" id="submit-button">Submit</button>
</div>
And here's the JS for this:
'use strict'

const card = document.querySelector(".rating-card");
const cardFront = document.querySelector(".rating-card__front");
const cardBack = document.querySelector(".rating-card__back");
const submitBtn = document.getElementById("submit-button");

submitBtn.addEventListener('click', function (){
const selectedRating = document.querySelector('input[type=radio]:checked').value;
if(selectedRating !== null) {
const selectionOutput = document.querySelector(".selected-value");
cardFront.classList.add('hidden');
cardBack.classList.remove('hidden');
selectionOutput.innerHTML = selectedRating;
}
});
'use strict'

const card = document.querySelector(".rating-card");
const cardFront = document.querySelector(".rating-card__front");
const cardBack = document.querySelector(".rating-card__back");
const submitBtn = document.getElementById("submit-button");

submitBtn.addEventListener('click', function (){
const selectedRating = document.querySelector('input[type=radio]:checked').value;
if(selectedRating !== null) {
const selectionOutput = document.querySelector(".selected-value");
cardFront.classList.add('hidden');
cardBack.classList.remove('hidden');
selectionOutput.innerHTML = selectedRating;
}
});
I'm getting the following error: Cannot set properties of null (setting 'innerHTML') So I don't understand why I'm getting that error if the .innerHTML part should only be applied if the selectedRating is not null
20 Replies
b1mind
b1mind•2y ago
Console.log it right before the if check
TheHonoredOne
TheHonoredOne•2y ago
It prints the value
TheHonoredOne
TheHonoredOne•2y ago
@b1mind look first console.log is before the if, second is inside the if
TheHonoredOne
TheHonoredOne•2y ago
(it prints 3 because i have 3 ratings but i had to save lines)
b1mind
b1mind•2y ago
Log selectionOutput after you query it
TheHonoredOne
TheHonoredOne•2y ago
It's null
b1mind
b1mind•2y ago
There we are
TheHonoredOne
TheHonoredOne•2y ago
Yeah, now I gotta figure why it's null I'm assigning it to something
b1mind
b1mind•2y ago
So your not getting that element Honestly you should be using a form and formData and possibly event delegation. Cleaner and easier code imo
TheHonoredOne
TheHonoredOne•2y ago
oh god I just saw what was wrong
TheHonoredOne
TheHonoredOne•2y ago
I was trying to do a class selector on an id, thanks for the help
b1mind
b1mind•2y ago
That will do it 😅 Been there done that
TheHonoredOne
TheHonoredOne•2y ago
Yeah I thought about it but it's merely a front end mentor challenge like just a simple rating card with no context whatsoever
b1mind
b1mind•2y ago
Good practice though learn to use the native api
TheHonoredOne
TheHonoredOne•2y ago
I'll switch to form anyways if that's good practice?
b1mind
b1mind•2y ago
Yup always Input without a form is broken
TheHonoredOne
TheHonoredOne•2y ago
Gotcha, thanks for the advice you're the goat
b1mind
b1mind•2y ago
You have onSubmit event for free with button submit and enter for free too. Also it returns formData which you won't need to pull values via query like you are
TheHonoredOne
TheHonoredOne•2y ago
🫡 amazing, wouldn't have imagined the formData part
b1mind
b1mind•2y ago
Leverage those native API and tools!
Want results from more Discord servers?
Add your server