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

David•2y ago

It prints the value

David•2y ago

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

David•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

David•2y ago

It's null

b1mind•2y ago

There we are

David•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

David•2y ago

oh god I just saw what was wrong

David•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

David•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

David•2y ago

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

b1mind•2y ago

Yup always Input without a form is broken

David•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

David•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