Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> What's The Most Efficient Way To Do This?

This is a discussion on What's The Most Efficient Way To Do This?, within the Javascript section. This forum and the thread "What's The Most Efficient Way To Do This?" are both part of the Programming Your Website category.

 
 Reply to this topicStart new topic
> What's The Most Efficient Way To Do This?
djeyewater
post Jun 10 2008, 12:47 PM
Post #1


Squeezing
***

Posts: 81
Joined: 18-February 08
I am writing a function to replace radio buttons in a form with graphics, the function loops through the radio buttons and then sets an onclick for them so that when they are clicked the graphics will be updated appropriately. Below is the code for the onclick I am setting.


CODE
         //radChecked = image of checked radio button
         //radNorm = image of normal radio button
         //The image has the same id as the radio button but is prefixed by 'img'
        
         inputs[i].onclick = function()
               {
                 //We don't know what radio button was checked previously, so we will have to loop through the relevant images until we find it, and then change it to a normal image
                 var radios = document.getElementsByName(this.name)
                 for(i=0; i<radios.length; i++)
                 {
                     var radImg = document.getElementById('img' + radios[i].id);
                     if(radImg.src == radChecked.src)
                     {radImg.src = radNorm.src; break;}
                 }
                 document.getElementById('img'+this.id).src = radChecked.src;
               }


Specific questions I have about this are:
1. I am setting the function for each element. Would it be more efficient to have the function seperate e.g.
CODE
inputs[i].onclick = radclick(this);
       //outside the loop
         function radclick(el)
         {//change the images}

2. I am looping through the elements and only changing the image if it is checked and is not the button that was just clicked. Would it be more efficient to just change the image src without checking e.g.
CODE
for(i=0; i<radios.length; i++)
                   {
                      document.getElementById('img' + radios[i].id).src = radNorm.src;
                 }
           document.getElementById('img'+this.id).src = radChecked.src;


3. This isn't shown in the code snippet above, but the images have a forid property, which is the id of the radio button it is for so when you click on an image it can click on the relevant radio button. The images also have an id which includes the word 'img' and the id of the radio button it is for e.g. image with id of 'imgRad1' and forid of 'Rad1' would be for a radio button with id of 'Rad1'. So I am duplicating information here. Is it most efficient to have this forid property so I can access the radio button via document.getElementById(this.forid) or would I be better off without it and just doing document.getElementById(this.id.substr(3)) (where 'this' is the image that has been clicked on)?

Thanks

Dave
Go to the top of the page
 
+Quote Post
Rakuli
post Jul 16 2008, 03:58 AM
Post #2


Squeeze Machine
Group Icon

Posts: 764
Joined: 13-February 08
From: Catching the squeezed drips downunder.
I think you're overworking yourself a little with this method.

Essentially, you want to change the image when a radio button is selected? I will assume for now that the first snippet from above sets the image on page load.

Before I write the code, you should declare the function and attach it to the event rather than add the function to each event. Declaring a function as a member method is much more efficient biggrin.gif

CODE
<script type="text/javascript">
// get inputs, loop through them and set the image to the appropriate image for each radio that is checked
// This will also add the onclick event handler that is declared in the radClick function below...

var inp = document.getElementsByTagName('input');
// count 'em
var nm = inp.length;
//loop

for (i=0; i< nm; i++)
{
    // Am I a radio button?
    if (inputs[i].type == 'radio')
    {
            // Add the onclick event handler
            inputs[i].onclick = radClick;
            // Now, is it checked? if it is, run the onClick function for this input
            if (inputs[i].checked)
                   inputs[i].onclick();
     }
}

// Now declare the function that changes the images
// This will be attached as a member method so we can use the special variable 'this' -- it allows us to reference "the current object(input)"
function radClick()
{
    // we know the id of the radio can get us a reference to the image
    document.getElementById('img' + this.id).src = radNorm; // where are you getting radNorm from? you'll have to let me know about that bit
}


That should remove all the duplication you had in your code... Just not sure about radNorm


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
djeyewater
post Oct 4 2008, 05:58 AM
Post #3


Squeezing
***

Posts: 81
Joined: 18-February 08
Thanks for your help Rakuli. The radNorm was just an image of a normal unchecked radio button that was declared further up in the script, but not in the script excerpts I posted.

Cheers

Dave
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: