[RESOLVED] Simple math, adding one.

@jamesplamondonOct 16.2009

newb here;

when i click on the button, i want the text box to +1. so its now @ 1, then i can do it again so its at @2 then @3 ect…

How can i do this??

[code=html] <html> <head> <script type=”text/javascript”> function oplusone(){

} </script> </head>

<body> <form id=”form1″ name=”form1″ method=”post” action=””> <label> <input type=”text” name=”number” id=”number” value=”0″/> </label> <p> <label> <input type=”submit” name=”Submit” value=”Submit” onclick=”oplusone()”/> </label> </p> </form> </body> </html>[/code]

to post a comment

JavaScript

17 Comments(s) _↴

@jamesplamondonauthorOct 16.2009 — #pirate

@thraddashOct 16.2009 — #Is this what you wanted:

[code=html]<html>
 <head>
 <script type="text/javascript">
 function oplusone()
 {
 with (document.getElementById("number")) {
 value = (1 * value) + 1;
 }
 }
 </script>
 </head>
 <body>
 <form id="form1" name="form1" method="post" action="">
 <label>
 <input type="text" name="number" id="number" value="0"/>
 </label>
 <p>
 <label>
 <input type="button" name="Submit" value="Submit" onclick="oplusone()"/>
 </label>
 </p>
 </form>
 </body>
 </html>[/code]

@jamesplamondonauthorOct 16.2009 — #some one was just helping me out, and

[code=html]
 function oplusone() {
 document.getElementById("txbethere").value++;
 }
 [/code]

Now im trying to have a diffrent button to add 5, this below works, but its bulky and kinda looks unprofessional

[code=html]
 
 function oplusfive() {
 document.getElementById("txbethere").value++;
 document.getElementById("txbethere").value++;
 document.getElementById("txbethere").value++;
 document.getElementById("txbethere").value++;
 document.getElementById("txbethere").value++;
 }
 [/code]

@thraddashOct 16.2009 — #[CODE]document.getElementById("txbethere").value+=5;[/CODE]

@jamesplamondonauthorOct 16.2009 — #

[code=html]
 document.getElementById("txbethere").value+=5;
 [/code]

That does not work, it add the # 5

click once= 5

click twice=55

click 3 = 555

etc..

@thraddashOct 16.2009 — #LOL, then I'll stick to my original posts method:

[CODE]function oplusfive()
 {
 with (document.getElementById("number")) {
 value = (1 * value) + 5;
 }
 }[/CODE]

@jamesplamondonauthorOct 16.2009 — #okay ?

thanks

@thraddashOct 16.2009 — #Or you can make the function do both:

[code=html]<html>
 <head>
 <script type="text/javascript">
 function oplusnumber(the_number)
 {
 with (document.getElementById("number")) {
 value = (1 * value) + the_number;
 }
 }
 </script>
 </head>
 <body>
 <form id="form1" name="form1" method="post" action="">
 <label>
 <input type="text" name="number" id="number" value="0" />
 </label>
 <p>
 <label>
 <input type="button" value="Plus 1" onclick="oplusnumber(1);" />
 <input type="button" value="Plus 5" onclick="oplusnumber(5);" />
 </label>
 </p>
 </form>
 </body>
 </html>[/code]

@Declan1991Oct 17.2009 — #value is a string. Never use with, it is totally unnecessary, sloppy and slows down code.

var v = document.getElementById("whatever").value;
 v = Number(v)+5;

What would make much more sense would be a generic function.

<i>
 </i>function addTo(id, amount) {
 var v = document.getElementById(id).value;
 v.value = Number(v) + amount;
 }

Called by addTo("idOfElement",10);

@thraddashOct 17.2009 — #LOL, I had to wait a whole day for someone to notice the [B]with[/B] keyword ?

BTW, your generic function needed correcting:

[CODE]function addTo(id, amount)
 {
 var v = document.getElementById(id);
 v.value = Number(v.value) + amount;
 }[/CODE]

@thraddashOct 18.2009 — #This is just for informational purposes:

I created a little test bed to see which is really the fastest way of adding one to an <input> field.

The code I used:

[code=html]<!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" xml:lang="en" lang="en">
 <head>
 <title>Speed Test</title>
 </head>
 <body>
 
   <input id="test" type="text" value="0" />
 
   <br />
   <br />
 
   <script type="text/javascript">
 
   function withFunction()
   {
   with (document.getElementById("test")) {
   value = (1 * value) + 1;
   }
   }
 
   function numberFunction()
   {
   var v = document.getElementById("test");
   v.value = new Number(v.value) + 1;
   }
 
   function numberFunction2()
   {
   var v = document.getElementById("test");
   v.value = (1 * v.value) + 1;
   }
 
   var $i = 0;
   var $time = 0;
   var $loops = 10000;
 
   $time = new Date().getTime();
   for ($i = 0; $i < $loops; $i++) {
   withFunction();
   }
   document.write('with keyword : <b>' + ((new Date().getTime() - $time) / 1000) + '</b><br />');
 
   $time = new Date().getTime();
   for ($i = 0; $i < $loops; $i++) {
   numberFunction();
   }
   document.write('number object : <b>' + ((new Date().getTime() - $time) / 1000) + '</b><br />');
 
   $time = new Date().getTime();
   for ($i = 0; $i < $loops; $i++) {
   numberFunction2();
   }
   document.write('value casting : <b>' + ((new Date().getTime() - $time) / 1000) + '</b><br />');
 
   </script>
 
  </body>
 </html>
 [/code]

The results I got from different browsers:

Internet Explorer 8:

with keyword : [B]0.534[/B]

number object : [B]0.566[/B]

value casting : [B]0.495[/B]

FireFox 3.0.14, (it clearly did not like this test)

with keyword : [B]10.142[/B]

number object : [B]10.104[/B]

value casting : [B]9.979[/B]

Google Chrome:

with keyword : [B]0.55[/B]

number object : [B]0.531[/B]

value casting : [B]0.498[/B]

By the look of things, casting a string variable to a number using the method: [B](1 * v.value)[/B] is a clear winner. And sometimes the browser favours the [B]with[/B] method over the Number object?

How does this test perform on your machine? Increase the [B]$loops[/B] variable and watch your browser suffer.

@jamesplamondonauthorOct 18.2009 — #I did this instead

[code=html]
 ////////////////////////////BETTING WITH BUTTONS///////////////////////
 
 // Plus 1,5,10,25,50*********************
 function AddMoney(x){
 document.getElementById('txbethere').value=document.getElementById('txbethere').value*1+x*1;
 } 

 // minus one********************
 function ominusone(){
 document.getElementById("txbethere").value--;
 }
 [/code]

This is the site:

http://www.jamesplamondon.netne.net/craps/craps.html

This is my javascript codes

http://www.jamesplamondon.netne.net/craps/javacraps.js

The game is working perfectly now, except 1 little thing but it dosen't really matter.

also when i validate all of this i get about 72 errors, iv tryed on many browsers and i got some testers aswell, and they said nothing is wrong

@jamesplamondonauthorOct 18.2009 — #[B]IE8[/B]

with keyword : [B]0.34[/B]

number object : [B]0.415[/B]

value casting : [B]0.204[/B]

[B]firefox 3.0.14[/B]

with keyword : [B]5.602[/B]

number object : [B]5.699[/B]

value casting : [B]6.307[/B]

[B]Chrom:[/B]

with keyword : [B]0.655[/B]

number object : [B]0.653[/B]

value casting : [B]0.679[/B]

@jamesplamondonauthorOct 18.2009 — #$loops@ a million in chrome

with keyword : [B]57.309[/B]

number object : [B]55.986[/B]

value casting : [B]55.641[/B]

@thraddashOct 18.2009 — #I tried your game, it works well ?

@Declan1991Oct 18.2009 — #BTW, your generic function needed correcting:

[CODE]function addTo(id, amount)
 {
 var v = document.getElementById(id);
 v.value = Number(v.value) + amount;
 }[/CODE]

[/QUOTE]

Indeed it did, though my intended code was

function addTo(id, amount)
 {
 var v = document.getElementById(id).value;
 v = Number(v) + amount;
 }

That's why I used v as my variable name, not e.

Multiplying by one is definetly faster that calling a function, I just prefer it. It's doesn't really make a difference, but I think using Number() or parseInt() or parseFloat() is clearer.

You shouldn't use with for reasons I'll leave to [url=http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/]Douglas Crockford[/url]. With is just trouble, in this case especially. Speed is the least of them.

@thraddashOct 18.2009 — #Haven't you heard, variable prefixing is old school now, *jokes*

Also in #JavaScript _↴

Exp Javascript calls twice right click menu and adding function

Success!

Help @jamesplamondon spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Simple math, adding one.

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Simple math, adding one.

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴