Frontend Mentor | Marija's profile

All comments

@vedatsozenSubmitted over 2 years ago

I made design with html and css as i want. But i could not print values that i wanted to get from radio buttons as 1,2,3,4,5. I am waiting your helps. Thank you.

Rating Card

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:

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