Skip to content
Submitted over 1 year ago

Interactive Rating Component

CJ Cameron•350
@CJCameron13
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Edit: Thanks to suggestions from @elyyyse I was able to resolve the issue...

Hi community! This is an incomplete project but I wanted to go ahead and submit it to get some feedback. This is my first project using Javascript.

For the most part I got everything to work, however I was unable to get the message that shows after the user clicks submit, to update according to the score selected. My populateScore function runs, but the score variable within it only recognizes that element that originally has the "selected" class. Even if it updates in the html file, which I can see in real time using the browser's developer tools.

Any help on what I am missing or doing wrong would be greatly appreciated!

Community feedback

  • P
    Elyse Kanagaratnam•300
    @elyyysePosted over 1 year ago

    Hey, CJ - You're so close! If you run your populateScore(); function inside of your submitButton event listener, it should work. The way you have it running, score = document.querySelector(".number.selected").textContent; is looking for an element that's already hidden.

    1
    CJ Cameron•350
    @CJCameron13Posted over 1 year ago

    @elyyyse Hi, Elyse. This worked! Thank you so much! And thank you for explaining what was wrong because that makes perfect sense. When I use display: none, it's basically taken out of the document, not just hidden to the eye. Therefore the JS can't "see" it either. Wonderful. Thank you so much.

    0
    P
    Elyse Kanagaratnam•300
    @elyyysePosted over 1 year ago

    @CJCameron13 - You're so welcome, I'm glad I could help! I was just thinking about it though, and the why I gave you is wrong. You can totally select a hidden element with JS. :facepalm:

    The reason moving your function worked is because — in your draft version — when you load the page, your browser runs selectRating();, then submitScore();, then populateScore();. It waits for the click on your Submit button to run whatever is inside your event listener, but at that point populateScore(); has already run and has no reason to run again.

    I hope this makes sense, and apologies for the faulty answer from before!

    Marked as helpful
    1
    Account deleted

    Hey @elyyyse, I highly advise you not to ask users for the following "… mark my answer as helpful" as it against the sites guidelines and can cause your account to get suspense/banned.

    0
    P
    Elyse Kanagaratnam•300
    @elyyysePosted over 1 year ago

    @vcarames, thank you so much for that heads up! Just deleted my previous comment.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord