Rating Card

Community feedback

• 

  Marija•80

  @Marija-KovPosted over 2 years ago

  Hi there. Your layout/solution looks very close to the design, great!

  Regarding your radio button/submit value problem:

  1. Input type issue

  First thing that can be noticed is that your input type isn't actually radio, it looks like a textbox. This problem was caused in your html where your input type was set to "radio unchecked" - it should be just:

  type="radio"
  

  . Now, this will result in five big radio buttons where your old buttons were. But if you click them, it will show correct radio button functionality.

  To put the style back on your radio buttons, you need to do a few things in your CSS file:

  1-a) in your input tag selector add styling:

       appearance: none;  
  

  which will make the big radio buttons disappear and reveal some of your previously done styling;

  1-b) add a pseudo-element that will have the input value attribute as content and adjust its position:

       input::before {
       content: attr(value);
       position: relative;
        top:  16px;
         }
  

  2. Submitting input value issue

  The reason your submit button function is returning undefined is because your "newnumber" element currently is an HTML collection i.e. containing all your elements that have "btn" class name and you want to show just the one selected value. To do this, you'll first need to convert your HTML collection into an iterable array with a simple method. Maybe also change your variable name to make a little more sense:

    let options = Array.from(document.getElementsByClassName("btn"));
  

  Then create a function that will iterate through the array and also check if an option is "checked". You'll also want to include a function that will initiate the functionality of the submit button conditionally:

          function selectOption() {
             options.forEach(option => {
                if(option.checked){
                  initSubmit(option)
                 }
             })
          }
  

  Add:

          onClick={selectOption()}   
  

  to your input button parent container (so you don't have to add it to each input element individually).

  Now you'll need to define the initSubmit function that takes the checked option as a parameter and adds a click event listener to your submit button:

  ((Remember to remove the inline onClick event handler from your submit button as that functionality is being taken care of by selectOption function returning initSubmit every time it's called for.))

             function initSubmit(option){
                 document.querySelector(".submit").addEventListener('click', ()=> {
                 document.getElementById("twoo").innerHTML = "You selected " + option.value + " out of 5 ";
                 document.getElementById("card").style = "visibility:hidden";
                 document.getElementById("thankyoucard").style = "visibility:visible";   
              })
           }
  

  Hope all of the above gives you a hint to the solution of your problem and makes it easier in the future. :)

  Additional tips:

  • Use innerText or textContent instead innerHTML to avoid XSS attacks to your website. There are some exceptions where innerText and textContent won't give you the same results as innerHTML (like when you're dynamically adding HTML to your page with javascript), but is perfectly fine in this case.

  • Use "let" or "const" instead of "var". This is an easy google find so I won't go into detail about it.

  • Declutter your code by storing more of the selected elements in variables at the top of your script and using just the variable names in the rest of your code - just like you did with your "newnumber" variable in your original code.

  • Be more descriptive in your id and class names so it's easier to assume what is being shown with your code. ex: instead: <div id="four"> maybe say: <div id="inputContainer">

  Marked as helpful

  0

  ---

  

  Vedat Sözen•230

  @vedatsozenPosted over 2 years ago

  @Marija-Kov Thank you Maria for your long explanation. I will make code adjustments that you wrote.

  I would like to follow you to get more help from you in future.

  Thank you so much.

  1

  

  Vedat Sözen•230

  @vedatsozenPosted over 2 years ago

  @vedatsozen Tried but really codes are a little bit complex and much. I prefer simple and easy method to do this.

  0

  

  Marija•80

  @Marija-KovPosted over 2 years ago

  @vedatsozen You're welcome! Of course, there might be a simpler way to solve this, this is just as simple as I personally could come up with at the time. A simple solution isn't always an easy solution and what may look simple on the outside isn't always as easy to build. Someone correct me if I'm wrong :P

  Marked as helpful

  0
• 

  Vedat Sözen•230

  @vedatsozenPosted over 2 years ago

  I revised my rating card. Now i can print radio button values easily to second page.

  1

  ---

  

  Marija•80

  @Marija-KovPosted over 2 years ago

  @vedatsozen

  Nice, I like how you got the radio buttons (document.forms[0].radios). Now all you need to do is style them.

  Also from the UX perspective and for the sake of the purpose of rating cards, your function shouldn't be able to execute if no value is selected.

  0
• 

  Mario Andrés Rosero Saza•50

  @mario994Posted over 2 years ago

  Hi, I do a pull request to your project.

  0
• 

  Pedro Brito•380

  @PedroBritoDEVPosted over 2 years ago

  did you already studied javascript?

  0

  ---

  

  Vedat Sözen•230

  @vedatsozenPosted over 2 years ago

  @PedroBritoDEV Yes i am trying to improve my JavaScript skills.

  0