Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive interactive rating component code using HTML, CSS JS

@tmoris

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello community, I need some guides, am getting difficulties in updating the Rating card choice value to match with the Thanks card selected value using JS. Any guidance in areas of improvement is highly appreciated. Thanks.

Community feedback

@CarvalhoVincent

Posted

Hi, seems there's an error in your JS line 37, check the console with inspector. And duplicate id for "numbtn-5". The report show also : bad value put for attribute method on element form. Maybe it's a first step to resolve your problem. I'm not able to help you more this time, I did it with an array. Happy coding !

Marked as helpful

0

@tmoris

Posted

@CarvalhoVincent, Can you help me elaborate how I can handle it using the array method? Am new to JS, and am exploring new ideas. I believe that will be of help to learn. Thanks a lot, I appreciate.

0

@CarvalhoVincent

Posted

@tmoris I created 5 html buttons with value 1 to 5, and onclick that call a saveRate function.

const rating = ["0"];

function saveRate(el) {
    rating.pop();
    rating.push(el.value);
}

Then I call the array in the "thanks page"

function displayThanks() {
    var thanksPage = document.getElementById("thanks");
    if(rating > 0){
    thanksPage.style.visibility = "visible";
    document.getElementById("choice").innerHTML = rating;
    } else {
        alert("Please select a rating !");
    }
}

Maybe it's not the best solution but it works for me. You can check https://github.com/CarvalhoVincent/rating-site Hope it is helpful !

1

Please log in to post a comment

Log in with GitHub
Discord logo

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