onClick do function to near text input?

[runestation]

This is hopefully a simple fix and I hope someone can help me out, I'm pretty new at coding.
I have a form on an html page and I want to make it so when a button is clicked, it adds one to the input to the right of it, and when a button to the right of the input is clicked, it will delete one to the left of that button. I don't want to resort to making a new function for each and every form, because there will be a lot.
Here is the form and input parts:

<form name="calculate">
<input type="button" onClick="add()" />
<input name="result" type="input" readonly="readonly" value="0" />
<input type="button" onclick="sub()" />
</form>

Here is what the function code looks like:

function add()
{
var add = 1 * calculate.name.value;
add = add + 1;
calculate.name.value = add;
}
function sub()
{
var add = 1 * calculate.name.value;
add = add - 1;
calculate.name.value = add;
}

Note: where I called the calculate.name.value, that obviously doesn't work, and I need some way, rather than making multiple functions and changing the name part, to be able to call to a name near the button, if at all possible.

Any and all ideas are appreciated,
Thanks!

[felgall]

<form name="calculate">
<input type="button" onClick="add('result')" />
<input id="result" name="result" type="input" readonly="readonly" value="0" />
<input type="button" onclick="sub('result')" />
</form>

function add(f)
{
var add = +document.getElementById(f).value;
document.getElementById(f).value = add + 1;
}
function sub(f)
{
var add = +document.getElementById(f).value;
document.getElementById(f).value = add - 1;
}

[Philip M]

I have the idea that this is homework.

A good many errors, I am afraid. You may not give a variable and a function the same name (add). There is no "type =input". And your textbox is named "result", not "name".

<form name="calculate">
<input type="button" value = "Add" onClick="add()" />
<input type="text "name="result"  size = "4" readonly="readonly" value="0" />
<input type="button" value = "Subtract" onclick="sub()" />
</form>

<script type = "text/javascript">

function add() {
var addOne =  Number(document.calculate.result.value)+1;
document.calculate.result.value = addOne;
}

function sub() {
var subOne = Number(document.calculate.result.value) -1;
if (subOne <0) {subOne = 0}  // not to turn negative
document.calculate.result.value = subOne;
}

</script>

Form elements should be referenced by name, not by id, as only a name value can be passed to a server-side script. To convert a string value to a number prefer to use Number() rather than *1 or a prefix+.


Due to the adverse weather conditions there are rail replacement buses operating from the car park. We apologise for any incontinence this may cause. - Notice at Flitwick Station (Beds.)

[runestation]

Thanks for the posts felgall and Philip. Philip, I made some fixes to my coding thanks to you, but what I was wanting to be able to do was, rather than writing a new function for every button and text input, is there a way to getElementById, such as felgall was suggesting (I couldn't get it to work, felgall), in order to add or subtract one from a new text input?
Basically, there are going to be multiple text inputs and add/subtract buttons for each input, and I want to be able to add/subtract without writing many functions.
By the way, this is not for homework , I'm working on a project and I was just needing a bit of guidance, which I appreciate!

[runestation]

Thanks for the posts felgall and Philip. Philip, I made some fixes to my coding thanks to you, but what I was wanting to be able to do was, rather than writing a new function for every button and text input, is there a way to getElementById, such as felgall was suggesting (I couldn't get it to work, felgall), in order to add or subtract one from a new text input?
Basically, there are going to be multiple text inputs and add/subtract buttons for each input, and I want to be able to add/subtract without writing many functions.
By the way, this is not for homework , I'm working on a project and I was just needing a bit of guidance, which I appreciate!

[Philip M]

Here you are:-

<form name="calculate">
<input type="button" value = "Add" onClick="add(1)" />
BOX 1 <input type="text" name="result1"  size = "4" readonly="readonly" value="0" />
<input type="button" value = "Subtract" onClick="sub(1)" />
<br>
<input type="button" value = "Add" onClick="add(2)" />
BOX 2 <input type="text" name="result2"  size = "4" readonly="readonly" value="0" />
<input type="button" value = "Subtract" onclick="sub(2)" />
<br>
<input type="button" value = "Add" onClick="add(3)" />
BOX 3 <input type="text" name="result3"  size = "4" readonly="readonly" value="0" />
<input type="button" value = "Subtract" onclick="sub(3)" />
</form>

<script type = "text/javascript">

function add(box) {
var r = Number(document["calculate"]["result"+box].value); 
document["calculate"]["result"+box].value = r+1;
}

function sub(box) {
var r = Number(document["calculate"]["result"+box].value); 
if (r>0) {   // not to be negative
document["calculate"]["result"+box].value = r-1;
}
}

</script>

[stereogirlny]

Hi Philip,

I've been searching far and wide for the solution you've posted here. Do you have any suggestions on how to hold the value once you click the subtract button? I'm creating a countdown ticker set at 500 and every time a form is submitted, I'm subtracting 1 from the ticker. I assume it has something to do with holding the value in a database/registry, but am just not sure. Any insight you have would be much appreciated!

Many thanks..

[Philip M]

Originally Posted by stereogirlny

Hi Philip,

I've been searching far and wide for the solution you've posted here. Do you have any suggestions on how to hold the value once you click the subtract button? I'm creating a countdown ticker set at 500 and every time a form is submitted, I'm subtracting 1 from the ticker. I assume it has something to do with holding the value in a database/registry, but am just not sure. Any insight you have would be much appreciated!

Many thanks..

You must use server-side coding to count the number of form submissions. JavaScript running in a browser is a client-side language. JavaScript does not have any commands for reading or writing files. Modern browsers can read files on the server using an Ajax call, but otherwise JavaScript has no capability to read from, write to, modify or delete a file (except a cookie), communicate with the server, access a database, the client's operating system or the Windows registry, or alter the default behaviour of the browser.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.