• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Tim Cooke
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Knute Snortum
  • paul wheaton
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Ron McLeod
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Tim Holloway
  • Carey Brown
  • salvin francis

Refactor repeating function of custom radio buttons

 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I found this code on a tutorial site that I wanted to use for some custom radio buttons. The example is excellent and works very well. Trouble is, I need several radiobutton sets with unique names. I have found that I am repeating the function each time and calling the function several times passing different arguments and revising the function names. Could someone help me refactor this code so I don't have to keep repeating it like I'm doing? I think I should create an object but I'm not sure how to get started with it. I would have asked on the website, but I could not find a forum, but I did send an email. If I get an answer, I will post here. Meantime, I appreciate everyone's help here. Thanks.

HTML


Javascript
 
Bartender
Posts: 1845
10
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ok, so you have copied/pasted the function four times.
And changed the variable names within each one.
You don't need to.
Having that function once should be sufficient.
You then call it once for each set of radio buttons you want on the page.
So delete customRadio2, customRadio3 and customRadio4 and you would have equivalent code with :

That is the whole point of a function. You write it once, and just reuse it.

Now taking a step back, and looking at your HTML
Do you really have several radio button sets with unique names?
Your example shows four radio buttons, each with their own name. But each "set" only consists of one radio button - what is the point of them then?

Are these radio buttons meant to be all one set in and of themselves, and you just have four options within this set? If so then you need to give all of them the same name (but different values)
 
Marshal
Posts: 67279
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What prevents you from using the first function and simply passing in the various radio group names?

[Edit: posted before I saw Stefan's response]
 
Chris Disilva
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Stefan Evans wrote:Ok, so you have copied/pasted the function four times.
And changed the variable names within each one.
You don't need to.
Having that function once should be sufficient.
You then call it once for each set of radio buttons you want on the page.
That is the whole point of a function. You write it once, and just reuse it.

Now taking a step back, and looking at your HTML
Do you really have several radio button sets with unique names?
Your example shows four radio buttons, each with their own name. But each "set" only consists of one radio button - what is the point of them then?

Are these radio buttons meant to be all one set in and of themselves, and you just have four options within this set? If so then you need to give all of them the same name (but different values)


Thank you, Stefan. Yes, you are right, I have a typo here in my example code, however, in the html I am using the same "name" attribute for each set. My apologies -- I will update my code above. So I do have to call the customRadio(arg) function each time for each radio button set? I do have to swap out images for a different custom radio button, so I'll need to add the revised function that uses the new CSS classes to swap. So I would have:
Is this correct?
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Chris Disilva wrote:I found this code on a tutorial site . . .




Find the custom radio button
 
Marshal
Posts: 65369
248
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Welcome to the Ranch Did you write the toggle switch code yourself?
 
Police line, do not cross. Well, this tiny ad can go through:
Enterprise-grade Excel API for Java
https://products.aspose.com/cells/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!