Kevin Powell - Community•2y ago

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•2y ago

Console.log it right before the if check

TheHonoredOneOP•2y ago

It prints the value

TheHonoredOneOP•2y ago

@b1mind look first console.log is before the if, second is inside the if

TheHonoredOneOP•2y ago

(it prints 3 because i have 3 ratings but i had to save lines)

b1mind•2y ago

Log selectionOutput after you query it

TheHonoredOneOP•2y ago

It's null

b1mind•2y ago

There we are

TheHonoredOneOP•2y ago

Yeah, now I gotta figure why it's null I'm assigning it to something

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

TheHonoredOneOP•2y ago

oh god I just saw what was wrong

TheHonoredOneOP•2y ago

I was trying to do a class selector on an id, thanks for the help

b1mind•2y ago

That will do it 😅 Been there done that

TheHonoredOneOP•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•2y ago

Good practice though learn to use the native api

TheHonoredOneOP•2y ago

I'll switch to form anyways if that's good practice?

b1mind•2y ago

Yup always Input without a form is broken

TheHonoredOneOP•2y ago

Gotcha, thanks for the advice you're the goat

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

TheHonoredOneOP•2y ago

🫡 amazing, wouldn't have imagined the formData part

b1mind•2y ago

Leverage those native API and tools!

Gaming

Programming

JS Ignoring my if condition