Function Recursion? Help!

[Senkusha]

Hello, I am new to using JavaScript. I mainly use PHP. I have designed a form that when a user clicks on the - or + button a two numbers will either increase or decrease. The problem I'm having is I want to streamline the code, but I don't think I'm doing something correctly.

I think the problem is either with the onClick="positiveClick(Strength)" because the variable argument Strength is not enclosed in quotation marks. If I do enclose the argument in quotes then nothing runs. (I have tested that with a document.write "1"; command.)

The other possiblitly could be with the steamlining of code. Instead of duplicating statements 6 times (with switch: case) I have attempted to make the document.creator.Strength.value a string variable instead of repetitive commands for each textbox name. Can anybody help me? Thank you!

Here is my source:


<tr>
<td colspan="2"><b>Strength</b></td>
<td align="right">
<input TYPE="text" NAME="Strength" VALUE="10"></input>
</td>
<td align="right">
<input TYPE="button" NAME="minus1" VALUE="-" onClick="negativeClick(Strength)"></input>
<input TYPE="button" NAME="plus1" VALUE="+" onClick="positiveClick(Strength)"></input>
</td>
</tr>



function positiveClick(intStat)
{
var fTotalPoints = document.creator.rpgTotalPoints.value;
var fAttribute = iniStat;
var fObject = "document.creator." + fAttribute + ".value";

if (fTotalPoints <= 270 && fTotalPoints >= 0)
{
if ( fObject < 100 )
{
fObject ++;
}
document.creator.rpgTotalPoints.value --;
}
}
document.creator.Strength.value

[crh3675]

First off, try accessing using the full method:

document.forms.creator

and try your code again.

Also, where is Strength defined?

[Charles]

<div>
<input type="text" id="value">
<button onclick="document.getElementById('value').value = Number(document.getElementById('value').value ) + 1">Increment</button><button onclick="document.getElementById('value').value = Number(document.getElementById('value').value ) - 1">Decrement</button>
</div>

[Senkusha]

Strength is defined as a string argument when calling the onClick function.

[Senkusha]

Charles: That would work, except that I need to also include the logic in the function to make sure the numbers don't go above the maximum value. Anyway I found that a very simple and overlooked typo was erroring out my code (I had mis-spelled intStat to iniStat!

But my problem still remains: Now when I try to run the code I need to figure out a way to make this function recursive.

Since it now will successfully take my string argument of the textbox being modified the code needs to make document.forms.creator.intStat.value (where iniStat is the name of the textbox) be variable.

I have tried to make that statment into a string, but that doesn't work:
"document.creator.forms.intStat.value"
"document.creator.forms." + iniStat + ".value"


Is there any hope? Thanks!

[Charles]

<div>
<input type="text" id="value">
<button onclick="if (document.getElementById('value').value < 100) document.getElementById('value').value = Number(document.getElementById('value').value ) + 1">Increment</button><button onclick="document.getElementById('value').value = Number(document.getElementById('value').value ) - 1">Decrement</button>
</div>

But I really need more information to be helpful. Is this a part of a FORM element? What are the other FORM elements if it is? What exactly are the limits? Is this for personal use or for publication on the internet? Nothing you've posted above calls for recursion. Are you using the term correctly?

[Senkusha]

The element is called from six identical lines, except for name and the argument for the onClick function:


<tr>
<td colspan="2"><b>Strength</b></td>
<td align="right">
<input TYPE="text" NAME="Strength" VALUE="10"></input>
</td>
<td align="right">
<input TYPE="button" NAME="minus1" VALUE="-" onClick="negativeClick('Strength')"></input>
<input TYPE="button" NAME="plus1" VALUE="+" onClick="positiveClick('Strength')"></input>
</td>
</tr>

There is Strength, Endurance, Quickness, Coordination, Focus, and Self.

The limits are, the maximum total points any person can have is 270 and the range for each element is between 10 and 100. Also a person can not go below 0 total points.

Right now it's personal use, but it will be on the internet as part of my message board software, and eventually part of a "modification" to that message board software for other administrtators to implement on their site(s).

Did that help any? I could just post the entire section if need be.

Thanks!

[Charles]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
fieldset {float:left; margin:1em; padding:1em}
input {text-align:right; width:5em}
form div {clear:left; text-align:center}
-->
</style>

<script type="text/javascript">
<!--
function total (f) {
var t = 0;
var i, e;
for (i=0; e=f.elements[i]; i++) {if (e.type == 'text') t += Number (e.value)}
return t;
}

function increment (e) {if (e.value < 100 && total(e.form)) ++e.value}

function decrement (e) {if (e.value > 10) --e.value}
// -->
</script>

</head>
<body>
<form action="submitCharacter.pl">
<fieldset>
<legend>Strength</legend>
<input id="strength" type="text" value="10">
<script type="text/javascript">
<!--
document.write('<div><button onclick="increment(this.form.strength)">+</button><button onclick="decrement(this.form.strength)">-</button>');
// -->
</script>
</fieldset>

<fieldset>
<legend>Endurance</legend>
<input id="endurance" type="text" value="10">
<script type="text/javascript">
<!--
document.write('<div><button onclick="increment(this.form.endurance)">+</button><button onclick="decrement(this.form.endurance)">-</button>');
// -->
</script>
</fieldset>

<fieldset>
<legend>Quickness</legend>
<input id="quickness" type="text" value="10">
<script type="text/javascript">
<!--
document.write('<div><button onclick="increment(this.form.quickness)">+</button><button onclick="decrement(this.form.quickness)">-</button>');
// -->
</script>
</fieldset>

<fieldset>
<legend>Coordination</legend>
<input id="coordination" type="text" value="10">
<script type="text/javascript">
<!--
document.write('<div><button onclick="increment(this.form.coordination)">+</button><button onclick="decrement(this.form.coordination)">-</button>');
// -->
</script>
</fieldset>

<fieldset>
<legend>Focus</legend>
<input id="focus" type="text" value="10">
<script type="text/javascript">
<!--
document.write('<div><button onclick="increment(this.form.focus)">+</button><button onclick="decrement(this.form.focus)">-</button>');
// -->
</script>
</fieldset>

<fieldset>
<legend>Self</legend>
<input id="self" type="text" value="10">
<script type="text/javascript">
<!--
document.write('<div><button onclick="increment(this.form.self)">+</button><button onclick="decrement(this.form.self)">-</button>');
// -->
</script>
</fieldset>

<div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</body>
</html>

[Senkusha]

Thank you! This works great! I have successfully modified the code to do everything that I need. I thought that the increment/decrement functions would have been the easiest functions to write. Thank you for all your help! I'll be sure to include you in the documentation.