rating component returns "undefined" (javascript)

Question

I'm facing a challenge from Front End Mentor - interactive rating component.

When I use 'console.log' in function 'getRate' it works and logs a number from button.

Also, when I assign a number to 'let rate' instead of a function, then function 'submit' shows this number in a 'thank-you-state'.

But when I try to combine all of this by this: 'let rate = getRate();' then i see 'undefined' instead of a number in a 'thank-you-state'.

    let chosenRate = document.querySelector('.chosen-rate');
   
    function getRate() {
        document.querySelectorAll('.rating-btn').forEach(btn => {
            btn.addEventListener('click', e => {
                return e.target.innerText;
            });
        });
    };
    
    let rate = getRate();
    
    function submit() {
        chosenRate.innerText = rate;
        document.querySelector('.submit-btn').addEventListener('click', () => {
            document.querySelector('.rating-state').classList.add('hide');
            document.querySelector('.thank-you-state').classList.remove('hide');
        });
    }

    getRate();
    submit();

<div class="survey-box">
                <div class="rating-state">                  
                    <h2>How did we do?</h2>
                    <p>
                        Please let us know how we did with your support request. All
                        feedback is appreciated to help us improve our offering!
                    </p>
                    <div id="buttons" class="buttons">
                        <button class="rating-btn btn-1">1</button
                        ><button class="rating-btn btn2">2</button
                        ><button class="rating-btn btn-3">3</button
                        ><button class="rating-btn btn-4">4</button
                        ><button class="rating-btn btn-5">5</button>
                    </div>
                    <button class="submit-btn">Submit</button>
                </div>

                <div class="thank-you-state hide">                  
                    <div class="selected-rate">
                        <p>You selected <span class="chosen-rate"></span> out of 5</p>
                    </div>
                    <h2>Thank you!</h2>
                    <p>
                        We appreciate you taking the time to give a rating. If you ever need
                        more support, don't hesitate to get in touch!
                    </p>
                </div>
            </div>

`getRate()` doesn't return anything, it just adds event listeners to a range of elements. — DBS, Oct 25 '22 at 09:21
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Oct 25 '22 at 14:47
My problem was that I wrapped my eventlisteners into functions and then tried to get the result of the function. I changed my code as JameyPlay suggested below and it worked. — Justyna, Oct 26 '22 at 08:03

JameyPlay · Answer 1 · 2022-10-25T09:57:04.390

I remove getRate() function

let chosenRate = document.querySelector('.chosen-rate');
    document.querySelectorAll('.rating-btn').forEach(btn => {
        btn.addEventListener('click', e => {
          chosenRate.innerText = e.target.innerText;
        });
    });



function submit() {
    document.querySelector('.submit-btn').addEventListener('click', () => {
        document.querySelector('.rating-state').classList.add('hide');
        document.querySelector('.thank-you-state').classList.remove('hide');
    });
}

submit();

ref. my repo: interactive-rating-component

rating component returns "undefined" (javascript)

1 Answers1