As someone relatively new to JavaScript and web-based programming, I have a project where I am looking to replace unattractive radio buttons with button selectors that function similarly. Unfortunately, I cannot provide an image due to my reputation being too low, so I will do my best to describe the concept.
A horizontal radio button list consists of text items displayed in a row with selectable circles next to each. When an item is selected, its corresponding circle is filled. Only one item can be chosen at a time.
In contrast, a horizontal button selector list features buttons grouped together horizontally, each displaying select options. The selected option triggers a color change on the button to indicate it is chosen. Again, only one selection per group is allowed.
The advantage of using button selectors over radio buttons lies in their suitability for tablet and touch-screen users while also offering a more visually appealing interface.
While I have managed to implement vertical and horizontal radio buttons, I am struggling to transition the idea into actual buttons for selectors. Could anyone point me in the right direction? My project involves numerous "topics" with up to 20 selectable items per topic, so simplicity in coding is key for efficiency.
Thank you!