Link to home
Start Free TrialLog in
Avatar of stargateatlantis
stargateatlantis

asked on

adding multiple functions to button

Lets say you have the following function.  What I am having problem is trying to figure out of adding this function to 20 buttons.  Instead of saying button1.click function you just do a loop and add the events to all 20 buttons.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
$(document).ready(function () {
        $("#btn1Start").click(function () {
				// MODIFICATION: expire times should be entered like ['00:00:00'] seperated with comma's
                timer1 = setInterval("$.do_time('timer1',['00:00:03','00:00:06','00:00:09','00:00:15'])", 1000);
                $(this).attr("disabled", true);
        });
        $("#btn2Start").click(function () {
                timer2 = setInterval("$.do_time('timer2', ['00:00:05'])", 1000);
                $(this).attr("disabled", true);
        });
        $("#btn3Start").click(function () {
                timer3 = setInterval("$.do_time('timer3')", 1000);
                $(this).attr("disabled", true);
        });
        totaltimer = setInterval("$.displayTotal('totaltimer')", 1000);
});
//Timer JQuery function
(function ($) {
   totaltime = "00:00:00";
   		// MODIFICATION: changed expireTime to times.
        $.do_time = function(timerID, times) {
                
                var time = ($("#" + timerID).html()).split(':');
                var hour = parseInt(time[0], 10);
                var minute = parseInt(time[1], 10);
                var second = parseInt(time[2], 10) + 1;
                
                var ttime = totaltime.split(':');
                var thour = parseInt(ttime[0], 10);
                var tminute = parseInt(ttime[1], 10);
                var tsecond = parseInt(ttime[2], 10) + 1;
                
                if (second > 59) {
                        second = 0;
                        minute++;
                }
                if (minute > 59) {
                        minute = 0;
                        hour++;
                }
                if (tsecond > 59) {
                        tsecond = 0;
                        tminute++;
                }
                if (tminute > 59) {
                        tminute = 0;
                        thour++;
                }
                
				// MODICIFICATION: loop over all times in stead of one time
				if(times){
					for(i in times){
						var etime = times[i].split(':');
						var ehour = parseInt(etime[0], 10);
						var eminute = parseInt(etime[1], 10);
						var esecond = parseInt(etime[2], 10);
						expired = false;
						if(ehour<hour) {
								expired = true;
						}
						else if(ehour==hour) {
								if(eminute<minute) {
										expired = true;
								}
								else if(eminute==minute) {
										if(esecond<=second) {
												expired = true;
										}
								}
						}
						
						if(expired) {
							//MODIFICATION: use a switch to control different color states.
							var steps = 5;
							progress = Math.floor((parseInt(i,10)+1)/times.length*steps)-1;
							switch(progress){
								case 0: $("#" + timerID).css("background-color", "yellow"); break;
								case 1: $("#" + timerID).css("background-color", "#FFC000"); break;
								case 2: $("#" + timerID).css("background-color", "#FF8000"); break;
								case 3: $("#" + timerID).css("background-color", "#FF4000"); break;
								case 4: $("#" + timerID).css("background-color", "red"); break;
							}
							
						}
						
					}
				}
                
                time = (hour>9?hour:'0'+hour) +':'+ (minute>9?minute:'0'+minute) +':'+ (second>9?second:'0'+second);
                $("#" + timerID).html(time);
                totaltime = "" + (thour>9?thour:'0'+thour) +':'+ (tminute>9?tminute:'0'+tminute) +':'+ (tsecond>9?tsecond:'0'+tsecond);
        } //End Doo time function
        $.displayTotal = function(labelID) {
                $("#" + labelID).html(totaltime);
        }
})(jQuery);
</script>
</head>
<body>
<table width="300">
   <tr>
      <td id="timer1">00:00:00</td>
      <td><input type="button" id="btn1Start" value="button1" /> (Expires in 15 seconds)</td>
   </tr>
   <tr>
      <td id="timer2">00:00:00</td>
      <td><input type="button" id="btn2Start" value="button2" /> (Expires in 5 seconds)</td>
   </tr>
   <tr>
      <td id="timer3">00:00:00</td>
      <td><input type="button" id="btn3Start" value="button3" /> (Does not expire)</td>
   </tr>
   <tr>
      <td id="totaltimer">00:00:00</td>
      <td></td>
   </tr>
</table>
</body>
</html>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

Use the same class (for example myclass) for all the button :

<input class="myclass" type="button" id ="btn1Start" />
<input class="myclass" type="button" id ="btn2Start" />
<input class="myclass" type="button" id ="btn3Start" />

Open in new window


so use :

$(".myclass").click(function() {

Open in new window

Avatar of claracruz
claracruz

You could give all the buttons the same classNames and then do like so;-


$(".myButons").click(function () {
      
        });


Bet u r kicking urself its so easy.. :-)
argh!!!  

@leakim971: u were in b4 me.. Ah well!
You can use the start with selector too : http://api.jquery.com/attribute-starts-with-selector/
and end with : http://api.jquery.com/attribute-ends-with-selector/

$("input[type='button'][id^='btn'][id=$'Start']").click(function() {

Open in new window


>argh!!!  
>@leakim971: u were in b4 me.. Ah well!

@claracruz see you on the next "fight" ;-))
Avatar of stargateatlantis

ASKER

But the question is how would you assign the timer function so that the timer index is all different.  Reason for this you want to have the ability to clear interval timer

This line here

timer3 = setInterval("$.do_time('timer3')", 1000);

timer3 should be a index or something
inside you get the button number/id with something like :

$("input[type='button'][id^='btn'][id=$'Start']").click(function() {
     var idNumber = $(this).attr("id").replace(/\D/g,""); // you get 1, 2, 3..., n
     setInterval("$.do_time('timer" + idNumber + "')", 1000);
     // rest of the code
});
ASKER CERTIFIED SOLUTION
Avatar of ikbentomas
ikbentomas
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
shahzadfatehali the only problem i don't see where you put the '00:00:03','00:00:06','00:00:09','00:00:15'
Hi,

its in html button element
<td><input type="button" id="btn1Start" class="timerButton" value="button1" data="00:00:03,00:00:06,00:00:09,00:00:15" /> (Expires in 15 seconds)</td>

Open in new window