Function not working in local browser

Javascript
1

I am working locally on this function:

function getMatchingCatsArray(){
    if (document.querySelector('input[type="radio"]:checked')){
        const selectedEmotion = document.querySelector('input[type="radio"]:checked').value
        console.log(selectedEmotion)

    }
}

Expected outcome: console of browser will show the value of the checked radio button

but it logs out only empty string

What am I doing wrong?

For reference - this is the larger code

import { catsData } from '/data.js'

const emotionRadios = document.getElementById('emotion-radios')
const getImageBtn = document.getElementById('get-image-btn')

emotionRadios.addEventListener('change', highlightCheckedOption)

getImageBtn.addEventListener('click', getMatchingCatsArray)

function highlightCheckedOption(e){
    const radios = document.getElementsByClassName('radio')
    for (let radio of radios){
        radio.classList.remove('highlight')
    }
    document.getElementById(e.target.id).parentElement.classList.add('highlight')
} 

function getMatchingCatsArray(){
    if (document.querySelector('input[type="radio"]:checked')){
        const selectedEmotion = document.querySelector('input[type="radio"]:checked').value
        console.log(selectedEmotion)

    }
}

function getEmotionsArray(cats){
    const emotionsArray = []    
    for (let cat of cats){
        for (let emotion of cat.emotionTags){
            if (!emotionsArray.includes(emotion)){
                emotionsArray.push(emotion)
            }
        }
    }
    return emotionsArray
}
2

Hey @wisdomlight

The issue might to be related to either the absence of a value attribute in the HTML for your radio buttons or an incorrect HTML structure that doesn’t allow the document.querySelector('input[type="radio"]:checked') to find the checked radio button correctly.

Some things to check:

  1. Check i your HTML and verify that your radio buttons have a value attribute and are grouped under the same name attribute. Here’s an example:
<div id="emotion-radios">
    <label>
        <input type="radio" name="emotion" value="happy" id="happy"> Happy
    </label>
    <label>
        <input type="radio" name="emotion" value="sad" id="sad"> Sad
    </label>
    <label>
        <input type="radio" name="emotion" value="angry" id="angry"> Angry
    </label>
</div>
<button id="get-image-btn">Get Image</button>

Each radio button should have:
• A name attribute to group them (e.g., emotion).
• A unique id for individual identification.
• A value attribute that represents the radio button’s selection value.

  1. Check highlightCheckedOption Behavior
    Your highlightCheckedOption function appears to modify classes for radio buttons’ parent elements. Make sure to check document.getElementById(e.target.id) in this function correctly targets the clicked radio button’s parent element.

  2. Test the getMatchingCatsArray Function with some console.logs

function getMatchingCatsArray() {
    const checkedRadio = document.querySelector('input[type="radio"]:checked');
    if (checkedRadio) {
        const selectedEmotion = checkedRadio.value;
        console.log(selectedEmotion); // Should log the value of the selected radio button
    } else {
        console.log("No radio button is checked.");
    }
}

If the radio buttons are correctly set up, clicking the button should log the value of the selected radio button.