JavaScript - Adding Time Per Button Click
Hello I am new to javascript (4 months), I would like to add an hour to the current time each time a button is clicked. I have this code:
------------------------------------------------------------------ var hourstbutton=document.getElementById("button3"); hoursbutton.onclick=function() { var divlink=document.getElementById("math3"); var newtime2=new Date(); var currenthours2=newtime2.getHours()+1; var currentmins2=newtime2.getMinutes(); var currentsecns2=newtime2.getSeconds(); var ampm2= (currenthours2>=12) ? "P.M." : "A.M."; if (currenthours2>=13) { currenthours2-=12; } if(currenthours2<1){ currenthours2=12; } if(currentmins2<10){ currentmins2= "0" + currentmins2; } if(currentsecns2<10){ currentsecns2="0" + currentsecns2; } divlink.innerHTML=currenthours2+":"+currentmins2+":"+currentsecns2+ " "+ampm2; ------------------------------------------------------------------------ How do I tie the number of button clicks into the number of times this code is executed? Any help is appreciated thanks. Similar TutorialsHow can I do this? I'm new to JavaScript. I tried messing with While but it just caused lag as it kept looping infinitely. The problem I think is that I have a variable that changes every time I click the button. The function changes the variable. So it successfully changes the variable once to my likings, then when I click the button (thus running the function) it does nothing. Here's an example I created to show you Quote: <html> <head> <script type="text/javascript"> var x = 50; var y = Math.floor(Math.random()*5); function test() { var a = x+y document.getElementById("testing").innerHTML=a; } </head> <body> <p id="testing"></p> <input type="button" value="asdf" onclick="test()" /> </body> </html> So in this case, I need to click the button multiple times in which each time it should add y to x. It only works once and then goes kaput. Thanks! Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS First off, I apologize if I'm in the wrong area. I was referred to the site here by a neighbor of mine that has used these forums in the past. Before I move forward with finding someone to help me with some kind of a browser extension, I need to know if it is even possible to do. I have zero experience with anything code related, but wanted to do a little leg work here. The basic goal is to be able to input a specific time of day, and have the code execute a click on a button or link. The more specific the timing can be, the better. I've done a little research over the past couple evenings, and I see that there are ways to use time intervals. I would if possible like to use exact hour, minutes, seconds, and even milliseconds. Alternatively, if anyone has come across something that already does what I'm looking for. I would be much appreciative if you could point me in that direction. Thank you all for your time. hye.. i'm trying to calculate value of balance by substract cash to total. But nothing happen. here is my code: Code: <script type="text/javascript"> function substract(){ { document.calculate.Cash.value = ZA; document.calculate.Total.value = Z1; balance(); } function balance(){ AAA = document.calculate.Balance; AAA.value = (ZA-Z1).toFixed(2); } </script> </head> <body style="background-color: #99FF99"> <?php // if there are any errors, display them if ($error != 'Unable to update') { echo '<div style="padding:12px; border:1px solid purple; color:red; font-weight: bold; text-align: center; font-size: medium; ">'.$error.'</div>'; } ?> <form action="" method="post" name="calculate" style="width: 1320px; "> <div class="style1"> <input type="hidden" name="CustID" value="<?php echo $CustID; ?>"> <input type="hidden" name="Total" value="<?php echo $Total; ?>"> <input type="hidden" name="TableID" value="<?php echo $TableID; ?>"> <div class="style5" style="width: 820px; height: 148px; margin-left: auto; margin-right: auto;"> <p class="style9"> </p> <p class="style17"><span class="style19">CUSTOMER </span> <strong> <span class="style19">ID:</span></strong> <strong> <?php echo $CustID; ?> </strong></p> <table style="width: 35%; height: 185px; margin-left: auto; margin-right: auto;" class="style15"> <tr> <td class="style11" style="width: 111px; height: 30px;"><strong>Table ID : </strong></td> <td style="height: 30px; width: 169px;" class="style18"><strong><?php echo $TableID; ?></strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; height: 30px;"><strong>Total : </strong></td> <td style="height: 30px; width: 169px;" class="style18"><strong> RM<?php echo $Total; ?> </strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; height: 30px;"><strong>Cash : </strong></td> <td style="height: 30px; width: 169px;" class="style1"> <strong> <span class="style20">RM</span> <input type="text" name="Cash" id="Cash" class="style17" style="width: 120px"></strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; "><strong>Balance : </strong></td> <td style="width: 169px;" class="style1"><strong> <span class="style20">RM</span> <input type="text" name="Balance" id="Balance" value="0.00" class="style17" style="width: 120px"></strong></td> </tr> </table> <p class="style5"><strong> <input class="style3" name="calculate" type="button" onclick="substract()" value="Calculate"> <input class="style3" name="submit" type="submit" value="Done"></strong> </div> </div> </form> Hey I want to enforce a click on the facebook share button, please help me out here. I was thinking something like this: Code: javascript:window.location="http://www.facebook.com/connect/prompt_feed.php?locale=en_US&message=hi"; javascript:function selectFirst() { publish.focus(); publish.click();} selectFirst(); Something wrong with that code? What code would work? Is it not possible? Thanks a lot, Sarah Hi. 1) I would like to click the Download button on this site, then wait lets say 60 sec & click free download button. http://uploading.com/files/S4WYPP73/...r_ENG.rar.html I remember that somehow it is possible to create the Request URL & then input it into IE & the server will think I hit the button. But how can I make the URL? And how is it called? posting URL request? I will be using firefox or I can make HTML file & execute it in IE for every file. PHP Code: <form action="http://uploading.com/files/get/S4WYPP73/" method="post" id="downloadform"> <input type="hidden" name="action" value="second_page" /> <input type="hidden" name="file_id" value="4663720" /> PHP Code: function do_step_1() { do_request('files', 'get', {file_id: 4663720, action: 'step_1'}, function(wait_time){ if(wait_time > 0) start_timer(wait_time); else if(wait_time <= 0) download(); }); } function do_step_2() { do_request('files', 'get', {file_id: 4663720, action: 'step_2'}); } PHP Code: function download() { $('#waitblock').html('Free Download'); $('#waitblock').click(function(){ do_step_2(); }); } I would like for the script to say "Ok here is the button on this page *clicks* (or submit)" I have tried this with out help, I'm not really sure what to do. I've tried learning what I can on my own, I've tried using the search tool. Here is the part of the code I am trying to use to make my click button. Code: <div id="interactiveBox"> <div class="divpad3"> <form name="buyform" method="POST" action="/marketplace/userstore/2690240/buy/?id=567595175&step=submit" ENCTYPE="application/x-www-form-urlencoded"> <strong>Buy It Now</strong> <strong>Password</strong> <input type="password" class="marketplaceInputField" name="password"> <input type="hidden" name="nonce" value="860307364.1283901229.441212630"> <button type="submit" class="cta-button-sm"><span>Buy Now</span></button> <br /><br /> </form> Here is what I have tried and failed.. This code will be used in combination with greasemonkey Code: <script>function clickOnLoad() { document.buyform.submit.value = "true"; } body onload="clickOnLoad()"</script> Hello, I am working on a tool for hardware quoting, I'm currently trying to add a button for adding line items to the quote. Here is what I currently have: The HTML: Code: <html> ... <input type="button" id="sbutt" onclick="buttinc()" value="Click Me" /> <div id="txtarea"></div> ... </html> The script: Code: vbutt = 0 function buttinc() { var buttona = document.getElementById("txtarea"); if (vbutt<100) { buttona.innerHTML="<div id='newdiv" + vbutt + "'></div><br />"; var buttb = document.getElementById("newdiv"+vbutt); buttb.innerHTML = "some text" + vbutt + "close tags and stuff"; vbutt = vbutt + 1; } } Now, it is sort of working the way I expect. When the button is clicked, it creates the new div, starts the id at 0, and increments the div id each time the button is pressed afterwards. It also displays the text (buttb.innerHTML) in the new div. However, it only increments the id of the same div, it doesn't create a new div under the first one. What I am hoping for is: click 1 : <div id="newdiv0">0</div> click 2 : <div id="newdiv1">1</div> click 3 : <div id="newdiv2">2</div> etc What it is doing: click 1 : <div id="newdiv0">0</div> click 2 : <div id="newdiv1">1</div> (newdiv0 disappears) click 3 : <div id="newdiv2">2</div> (newdiv1 disappears) What am I missing? Any help is appreciated. I am trying to set up a web that new times will be displayed when they add current times to a form. here is the static HTML <form method="POST" > current time is 11:32 AM</p> <p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p> <p>add another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p> <p><input type="submit" value="Submit" name="B1"></p> <p><input type="reset" value="Reset" name="B2"></p> </form> I would like to have the new times to change dynamically as they type in either (or both) input boxes Hi guys, At the moment i have this code which disable the middle button in Safari and Chrome.. Code: $('body').mousedown(function(e){ if(e.button==1) return false } ); How can I disable it in Firefox and IE?.. i think IE middle button ==4 but its not working for me. Thanks in advance! Hi there. I want to alert the user that he or she has not clicked on any of the radio buttons in each group. How do I do so? Code: <!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> <title>Untitled Page</title> <script type="text/javascript"> function validateRadio(obj,correct){ var result = 0 for(var i=0; i<obj.length; i++){ if(obj[i].checked==true && obj[i].value==correct) result = 1 } if(!result && obj.value == correct) result = 1 return result; } </script> </head> <body> <form onsubmit=" var err = '' if(!validateRadio(this.a,3 || 1)) { err+='\nFirst radio is wrong'; } if(!validateRadio(this.b,2 || 1)) { err+='\nSecond radio is wrong'; } if(err.length) { alert('Problem:'+err); return false; } else { alert('Good Job -- Submitting'); return true; }" action="#"> Choose "3" <input type="radio" name="a" value="1" /> 1 <input type="radio" name="a" value="3" /> 3 <p>Choose "2" <input type="radio" name="b" value="1" /> 1 <input type="radio" name="b" value="2" /> 2 </p><p><input type="submit" value="Submit" /> </p></form> </body> </html> Please advise. hi to all, sorry for this question. First I have to say this that I'm very noob in javascript. My question is how to show the value of my radio button when click. I have this code: Code: <tr><td width="10px"></td><td width="60%">Neatness</td> <td width="40%"> <input name="neat" type="radio" class="hover-star" value="1" title="Poor"/> <input name="neat" type="radio" class="hover-star" value="2" title="Fair"/> <input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/> <input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/> </td></tr> say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know hot to do this in jquery. I dont get why that doesn't work... it has me baffled 0.o Code: <html> <div id="divId">Button clicked 0 times</div> <input type="button" value="click me" onclick="divClick()" /> <script type="text/javascript"> var i = 0; function divClick() { var colorNum1 = Math.floor(Math.random()*255); var colorNum2 = Math.floor(Math.random()*255); var colorNum3 = Math.floor(Math.random()*255); var color = "rbg(" + colorNum1 + "," + colorNum2 + "," + colorNum3 + ")"; i++; var divId = document.getElementById("divId"); divId.style.backgroundColor = color; divId.innerHTML = "Button clicked " + i + " times"; } </script> </html> figured it out finally i had rbg instead of rgb >< I want to show an hourglass instead of a mouse pointer on click of a button. I'm having both client and server side validations on the button click event. I have written the code for hourglass in the javascript function along with the validations. Now, on click of the button the hourglass gets displayed after 3-4 seconds and not immediately. According to me, the hourglass is getting displayed after the javascript function(client side validation) is executed and before server side validation begins. Is there any way to display the hourglass without delays ? Kindly let me know if there is any fix for eliminating this delay. I hope my question is clear. Please let me know if i'm wrong somewhere as i'm new to javascript programming. Thanks in advance. zizou. What im trying to do is have the page auto refresh after the time countdown has expired. Here is the java code for the counter how would it be possible to add a autorefresh after the counter has reached 0 time left. Code: function ulticountdown(time, id, format, keepCounting, zero, langarray){ timeleft = time; var countUp = false; if (timeleft < 0) { if (keepCounting == 0) { timeleft = 0; } else { timeleft *= -1; countUp = true; } } seconds = timeleft%60; timeleft -= seconds; timeleft = timeleft/60; minutes = timeleft%60; timeleft -= minutes; timeleft = timeleft/60; hours = timeleft%24; timeleft -= hours; days = timeleft/24; var counterstring = ''; if (zero == 1) { if (seconds < 10) { seconds = '0'+seconds; } if (minutes < 10) { minutes = '0'+minutes; } if (hours < 10) { hours = '0'+hours; } } if (format == 1) { if (days != 0) { if (days != 1) { counterstring = counterstring+" "+days+" "+langarray[1]; } else { counterstring = counterstring+" "+days+" "+langarray[0]; } } if (hours != 0) { if (hours != 1) { counterstring = counterstring+" "+hours+" "+langarray[3]; } else { counterstring = counterstring+" "+hours+" "+langarray[2]; } } if (minutes != 0) { if (minutes != 1) { counterstring = counterstring+" "+minutes+" "+langarray[5]; } else { counterstring = counterstring+" "+minutes+" "+langarray[4]; } } if (seconds != 1) { counterstring = counterstring+" "+seconds+" "+langarray[7]; } else { counterstring = counterstring+" "+seconds+" "+langarray[6]; } } else if (format == 2) { if (days != 0) { if (days != 1) { counterstring = counterstring+" "+days+" "+langarray[1]; } else { counterstring = counterstring+" "+days+" "+langarray[0]; } } if (hours != 0) { if (hours != 1) { counterstring = counterstring+" "+hours+" "+langarray[3]; } else { counterstring = counterstring+" "+hours+" "+langarray[2]; } } if (minutes != 0) { if (minutes != 1) { counterstring = counterstring+" "+minutes+" "+langarray[5]; } else { counterstring = counterstring+" "+minutes+" "+langarray[4]; } } } else if (format == 3) { if (days != 0) { if (days != 1) { counterstring = counterstring+" "+days+" "+langarray[1]; } else { counterstring = counterstring+" "+days+" "+langarray[0]; } } if (hours != 0) { if (hours != 1) { counterstring = counterstring+" "+hours+" "+langarray[3]; } else { counterstring = counterstring+" "+hours+" "+langarray[2]; } } } else if (format == 4) { if (days != 0) { if (days != 1) { counterstring = counterstring+" "+days+" "+langarray[1]; } else { counterstring = counterstring+" "+days+" "+langarray[0]; } } } else if (format == 5) { if (days != 0) { if (days != 1) { counterstring = counterstring+" "+days+" "+langarray[1]; } else { counterstring = counterstring+" "+days+" "+langarray[0]; } } counterstring += " "+hours+":"+minutes+":"+seconds; } else if (format == 6) { counterstring = days; }else { // we should never get here, but for safety add the last one as default case. if (days != 0) { if (days != 1) { counterstring = counterstring+" "+days+" "+langarray[1]; } else { counterstring = counterstring+" "+days+" "+langarray[0]; } } counterstring += " "+hours+":"+minutes+":"+seconds; } var newdiv = document.createElement("div"); newdiv.innerHTML = counterstring; var olddiv = document.getElementById("counter"+id); var parent = olddiv.parentNode; parent.removeChild(olddiv); newdiv.id = "counter"+id; parent.appendChild(newdiv); if (countUp == true) { newtime = time-1; } else { newtime = time-1; } setTimeout("ulticountdown("+newtime+","+id+","+format+", "+keepCounting+", "+zero+", langarray)",1000); } I want to change the color of the gridview when a button which has the value of the row index of the gridview is clicked ...this button is not inside the gridview but some where else on the form but it can send the gridview rowindex to the function so need a function to change the color of the row or bring it to focus in someway... I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate... It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong. Problem code in jsbin--> http://jsbin.com/okifa3/ Code: $(function() { var activateOwner = function(u) { var dataString = 'oid=' + u + "&a=1"; $.ajax({ type: "GET", url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php", data: dataString, success: function() { $('#spanowneractivation' + u).css('display', 'none'); $('#message1' + u).html("Activated!").hide().fadeIn(1500, function() { $('#message1' + u); }); $('#spanownernamelink' + u).css('display', 'inline'); $('#' + u).val('Deactivate'); $('#spanownernametext' + u).css('display', 'none'); $('#' + u).removeClass('btnActivate'); $('#' + u).addClass('btnDectivate'); setTimeout(function() { $('#message1' + u).css('display', 'none'); $('#spanowneractivation' + u).hide().fadeIn(1500); }, 2000 ); } }); return false; }; var deactivateOwner = function(u) { var dataString = 'oid=' + u + "&a=0"; $.ajax({ type: "GET", url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php", data: dataString, success: function() { $('#spanowneractivation' + u).css('display', 'none'); $('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() { $('#message1' + u); }); $('#spanownernamelink' + u).css('display', 'none'); $('#spanownernametext' + u).css('display', 'inline'); $('#' + u).val = 'Activate'; $('#' + u).removeClass('btnDeactivate'); $('#' + u).addClass('btnActivate'); setTimeout(function() { $('#message1' + u).css('display', 'none'); $('#spanowneractivation' + u).hide().fadeIn(1500); }, 2000 ); } }); return false; }; $(".toggleOwnerButton").click(function() { if($(this).val() == 'Activate') { activateOwner($(this).attr("id")); } else { deactivateOwner($(this).attr("id")); } }); }); I wish to have my form update a text field when a 'add' link or button is clicked, allow for more entries to be added without having the page refresh. but i need to be able to have both the friends name and their number added to the field like so if friends name is say 'jason' and their number is '0987654321' then it will add to the textarea like so. jason [0987654321] this way i should be able to get the data and split it up when the form is send so i can add them in the DB. the part i am stuck on is how to get both fields in the textarea. allowing for more to be added without a refresh. can anyone suggest how they might do this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="AddUser" action="" method="post"> <div> <div class="formspacer">Username: <input type="text" name="username" id="username" value=""></div> <div class="formspacer">Contact Telephone Number: <input type="text" name="phone" id="phone" value=""></div> <div class="formspacer">Your Email address: <input type="text" name="email" id="email" value=""></div> <br /> <div class="formspacer"><strong>Enter each entry and click ADD to insert.</strong></div> <div class="formspacer">Friend name: <input type="text" name="friendname" id="friendname" value="" size="40"></div> <div class="formspacer">Friend`s mobile: <input type="text" name="friendmob" id="friendmob" value="" size="20"> <br />ADD<br /> <textarea disabled name="MULTIfriend" id="MULTIfriend" cols=20 rows=10></textarea></div> </div> <input type="submit" name="AddUser" value="Add User"> </form> </body> </html> |