Ideas for removing span in modal

JavaScript
1

I am making steady progress on the project. I got the modal set up, and right now I have completed the input checks if the value is lower than the pledge amount. When the user enters a lower value than the pledge and error span is created. I am now working on the logic for changing the amount on the main page after a pledge is donated.

However, for the spans that get created I am looking for some ideas. Would you leave them on there until a user enters a correct value? (when a user enters a correct value it will eventually go to another page anyway). What do you think?

2

The most interactive way to validate would be to trigger a validation callback every time with an onchange event, but that might not be necessary. You could also validate on click/submit as you suggested. But if you do that, you probably want to hide the span when the user re-enters the field.

3

I think that will be the way to go. When the user focus backs in the input then the span will hide.

I have run into a problem now. In the challenge

You can see in the project when a radio button is selected there is a green border around the option, and the other options have their inputs and buttons hidden. Right now, I am having a hard time just getting the radio selected when the respective button is pushed.

Then I am assuming the same button click would also have the logic for hiding the other elements. Here is my current pen

4

I can’t get the modals to show up on your pen, but I am signed out.

5

May work now. added bootstrap to the pens external scripts.

6

Have you tried giving all your radio buttons the same name attribute? The browser should handle the selection change if you do that.

7

They all have the same name, but once the page loads there is no selected radio button. The challenge does not give real description of how the challenge should be solved. So, I interpret as the radio button getting selected once one of the two buttons are pressed. Right now, every radio button is false

const pledgeButtonOne = () => {
     //option is false here
    const optionToggle = document.querySelector("#no-reward").checked;
    pledgeButton.addEventListener("click", () => {
      //setting toggle to true
        optionToggle.checked = true;
       //still comes back false
            console.log(optionToggle);
    })
}
8

You’re storing the checked state in optionToggle. I think you want the whole element, because later you’re setting the checked state of the variable.

9

You probably need a utility function to uncheck all radio buttons when you click on an option since the radio elements are standalone. You’d need to run it every time an option is clicked.

10

I was able to get it worked out. The right button selects the radio, the border gets added, and the other option button is hidden. Now, I just need to work out the toggle function

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.