help please!! simple calculation

**HippieChickie** · 02-07-2014, 08:12 PM

hello

Im new to java but know enough html to make webpages. I would appreciate any help anyone can give me & I thank you in advance.

I have 3 user input text boxes that when a user types in a number it subtracts that number by 71 & posts the result in another hidden text box below it. works great no problems there.

however, when I try to add the total in the 3 text boxes to keep a running total, I cant seem to get it to work no matter what I try. Im sure its in my syntax somewhere or im missing something. Pasted below is the most recent code I been trying but I have tried other ways but Its not working. I know I must be close cause I no longer get the errors when I put a number in the box but just cant get it! I have tried the onchange because I seen other use it for a running total but usually on a form with options. mine is user imputed.

Code:

<script type="text/javascript">
<!--
function calc(A,SUM) {
  var one = document.getElementById(A).value;
  document.getElementById(SUM).value = 71 - one;


}
//-->
</script>

<script type="text/javascript">
<!--
function calc(B,SUM1) {
   var two = document.getElementById(B).value; 
  document.getElementById(SUM1).value = 71 - two;

}
//-->
</script>


<script type="text/javascript">
<!--
function calc(C,SUM2) {
   var three = document.getElementById(C).value; 
  document.getElementById(SUM2).value = 71 - three;

}
//-->
</script>


<table>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">
<input name="sum" id="op1" onkeyup="calc('op1','result')" size="2" maxlength="2" />
      </td>
      <td width="109" align="center">
<input name="sum1" id="op2" onkeyup="calc('op2','result1')" size="5" />
      </td>
      <td width="109" align="center">
<input name="sum2" id="op3" onkeyup="calc('op3','result2')" size="5" />
      </td>
      <td width="109" align="center" height="21"></td>
      <td width="109" align="center" height="21"></td>
    </tr>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">
      <input name="sum" id="result" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">

      </td>
      <td width="109" align="center">
      <input name="sum1" id="result1" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">
      </td>
      
      <td width="109" align="center">
      <input name="sum2" id="result2" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">
      </td>
      <td width="109" align="center" height="21"></td>
      <td width="109" align="center" height="21">
            </td>
    </tr>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">

      </td>
      <td width="109" align="center">
      </td>
      <td width="109" align="center">
      </td>
      <td width="109" align="center" height="21">


<INPUT TYPE=TEXT NAME="answer" SIZE=5 DISABLED
    ONCHANGE=" document.answer.value = document.result.value + document.result1.value + document.result2.value" >
      </td>
      <td width="109" align="center" height="21">


      </td>
    </tr>
  </table>

again, thanks for any help in advance.

**jscheuer1** · 02-07-2014, 09:18 PM

The value of any form element is a string unless something is done to it to convert it to a number or to something else. Subtraction is math, so that converts things to numbers if they aren't already and can be. Addition however also is used to concatenate strings, so it will not automatically convert a string to a number. Signing a string will convert it to a number (once again, if it can be converted to one). So, assuming everything else you have works and that these values can be converted to numbers:

Code:

document.answer.value = +document.result.value + +document.result1.value + +document.result2.value

Should take care of it. I do question another part of this though:

Code:

<INPUT TYPE=TEXT NAME="answer" SIZE=5 DISABLED
    ONCHANGE=" document.answer.value = document.result.value + document.result1.value + document.result2.value" >

If this input is disabled, when will it ever change? Perhaps you want to execute:

Code:

document.answer.value = +document.result.value + +document.result1.value + +document.result2.value

as the result of clicking on a button. Maybe something like:

Code:

<input type="button" onclick="document.answer.value = +document.result.value + +document.result1.value + +document.result2.value" value="Get Total">

**HippieChickie** · 02-07-2014, 11:18 PM

thanks for your quick reply.

if I understand correctly I was using the + as an AND rather than as addition (or something like that)

with that said, I tried to apply your suggestions but alas it didn't work. the reason I was using the onChange is because I want it to be a running total. what they see from the result should also post in the answer box & change as the other box values are added in. I was trying not to use a button but if it will only work that way so be it.

so now im getting an error when I click the Get Total button. the error is: unable to get property 'value' of an undefined or null reference. now im really lost.

I changed what I had to this:
<input type="button" onclick="document.answer.value = +document.result.value + +document.result1.value + +document.result2.value +document.result3.value" value="Get Total">
 
<td width="111" align="left" height="39">

<INPUT TYPE=TEXT NAME="answer" SIZE=5>
</td>

now the error is referring me to this line:
<input name="sum" id="op1" onkeyup="calc('op1','result')" size="2" maxlength="2" /><br><input name="sum" id="result" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">

------------
perhaps its because of the readonly text box where the answer goes? it cant get the value from it?

thanks again for your time.

**jscheuer1** · 02-08-2014, 03:19 PM

Originally Posted by HippieChickie

thanks for your quick reply.

if I understand correctly I was using the + as an AND rather than as addition (or something like that)

Yes, that's exactly the concept there, and you were. In javascript + can do either. If the items are strings it will AND (concatenate) them. If they're numbers it will add them. In fact if the first item is a number and the second one is a string, it will convert the first to a string and concatenate them.

I was in a hurry when I looked at this the first time and was tempted to add that there might also be other problems. There were. I think this is what you are looking for:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function calc(A, SUM) {
	var one = document.getElementById(A).value;
	document.getElementById(SUM).value = 71 - one;
	document.getElementById('answer').value = +document.getElementById('result').value + +document.getElementById('result1').value + +document.getElementById('result2').value
}

</script>
</head>
<body>

<table>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">
<input name="sum" id="op1" onkeyup="calc('op1','result')" size="2" maxlength="2" />
      </td>
      <td width="109" align="center">
<input name="sum1" id="op2" onkeyup="calc('op2','result1')" size="5" />
      </td>
      <td width="109" align="center">
<input name="sum2" id="op3" onkeyup="calc('op3','result2')" size="5" />
      </td>
      <td width="109" align="center" height="21"></td>
      <td width="109" align="center" height="21"></td>
    </tr>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">
      <input name="sum" id="result" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">

      </td>
      <td width="109" align="center">
      <input name="sum1" id="result1" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">
      </td>
      
      <td width="109" align="center">
      <input name="sum2" id="result2" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: bold; border-style: none; border-width: 0px">
      </td>
      <td width="109" align="center" height="21"></td>
      <td width="109" align="center" height="21">
            </td>
    </tr>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">

      </td>
      <td width="109" align="center">
      </td>
      <td width="109" align="center">
      </td>
      <td width="109" align="center" height="21">


<INPUT TYPE=TEXT NAME="answer" id="answer" SIZE=5 DISABLED
      </td>
      <td width="109" align="center" height="21">
<input type="button" onclick="document.getElementById('answer').value = +document.getElementById('result').value + +document.getElementById('result1').value + +document.getElementById('result2').value" value="Get Total">
      </td>
    </tr>
  </table>
</body>
</html>

Notes:

The document.name.value and document.id.value syntax that you were using, and that I copied for:
Code:
```
document.answer.value = +document.result.value + +document.result1.value + +document.result2.value
```
is deprecated and/or never was valid. I converted it to document.getElementById().
The calc function you had was written three times. But it was the same function. Each time it was written, it redefined itself. I got rid of the last two, as the first was sufficient.
Since you said you wanted a running total, the most logical place to put the code that totals was at the end of the calc function. So that's where I put it.
If someone pastes new values into the inputs using the mouse, onkeyup will not fire. If that's a concern, add onchange to all of them, ex:
Code:
```
<input name="sum" id="op1" onchange="calc('op1','result')" onkeyup="calc('op1','result')" size="2" maxlength="2" />
```
If the entered values are non-numeric, things will get messy. You could reject non-numeric values by testing the values before subtracting them from 70, but that's another story (easy to do though).

**HippieChickie** · 02-09-2014, 10:43 PM

hello again.

I wrote the calc function 3x cause it was the only way I could get it to work. when I put all the var in the same function it never would give me a total. thanks for fixing that.

I now have been working on a new section & would appreciate some help if you have the time. again, its the same function 4x but in separate scripts cause its the only way I could get it working. now im trying to have a checkbox by each textbox. if the checkbox is checked, the textbox is disabled while showing the #71 & the total points would show as 5 more than the 71. I can get the 5 points to show up in a separate location & I can get the box to be disabled when the box is checked but I cant get it to be enabled again when the checkbox is unchecked. the 1st 2 checkboxes/textboxes are the only ones I have tried to get working. I haven't tried to get the additional 5 points added yet as im not sure where to start with that because you can only have one onClick per check correct?

thanks for any help you can provide or advise you can give me. have a good day.

pasted below is my code:
--------------------

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function calc(A,SUM) {
	var one = document.getElementById(A).value;
	document.getElementById(SUM).value = 71 - one;
	document.getElementById('answer').value =  +document.getElementById('result').value + +document.getElementById('result1').value + +document.getElementById('result2').value+ +document.getElementById('result3').value
	}
</script>



<script type="text/javascript">

function calcpis() {
var el, b = 0;
var totalb = 0;

while(el = document.getElementsByName("bstart1")[b++]) {
if(el.checked) { totalb= totalb + Number(el.value);}




}
//alert(total);
var div = document.getElementById('divid');
div.innerHTML = "+ " +totalb ;
}
</script>

<script type="text/javascript">

function calcg() {
var el, g = 0;
var totalg = 0;

while(el = document.getElementsByName("gstart1")[g++]) {
if(el.checked) { totalg= totalg + Number(el.value);}


}
//alert(total);
var div = document.getElementById('divid');
div.innerHTML = "+ " +totalg ;
}
</script>

<script type="text/javascript">

function calcr() {
var el, r = 0;
var totalr = 0;


while(el = document.getElementsByName("rstart1")[r++]) {
if(el.checked) { totalr= totalr + Number(el.value);}


}
//alert(total);
var div = document.getElementById('divid');
div.innerHTML = "+ " +totalr ;
}
</script>


<script type="text/javascript">

function calcy() {
var el, y = 0;
var totaly = 0;


while(el = document.getElementsByName("ystart1")[y++]) {
if(el.checked) { totaly= totaly + Number(el.value);}


}
//alert(total);
var div = document.getElementById('divid');
div.innerHTML = "+ " +totaly ;
}
</script>

    <script language="javascript">
    function grayout(disable,sum1)
    {
         document.getElementById(sum1).disabled = !disable
    }
    



</script>



</head>
<Body>


&nbsp;


<taBle>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">
<input name="sum" id="op1" onkeyup="calc('op1','result')"  size="5" maxlength="2" /><input type="checkBox" name="bstart1" value="5" onclick="calcpis()">
      </td>
      <td width="109" align="center">
<input name="sum1" id="op2" onkeyup="calc('op2','result1')" size="5" maxlength="2"/><input type="checkBox" name="gstart1" value="5" onclick="grayout(this.unchecked, 'sum1')">
      </td>
      <td width="109" align="center">
<input name="sum2" id="op3" onkeyup="calc('op3','result2')" size="5" maxlength="2"/><input type="checkBox" name="rstart1" value="5" onclick="calcpis()">
      </td>
      <td width="109" align="center" height="21">
<input name="sum3" id="op4" onkeyup="calc('op4','result3')" size="5" maxlength="2" /><input type="checkBox" name="ystart1" value="5" onclick="calcpis()">

      </td>
      <p align="center">
<div id="divid" style="color:red;"></div>


    </tr>
    <tr>
      <td width="108" align="center" height="21"></td>
      <td width="109" align="center">
      <input name="sum" id="result" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">

      </td>
      <td width="109" align="center">
      <input name="sum1" id="result1" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
      </td>
      
      <td width="109" align="center">
      <input name="sum2" id="result2" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
      </td>
      <td width="109" align="center" height="21">
      <input name="sum3" id="result3" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
      </td>
      <td width="109" align="left" height="21">


<INPUT TYPE=TEXT NAME="answer" id="answer" SIZE=5 DISABLED
      </td>

            </td>
    </tr>
    <tr>
      <td width="109" align="center">
 

      </td>
      <td width="109" align="center">
      
      </td>
      <td width="109" align="center">
          </td>
      <td width="109" align="center">
      </td>
      <td width="109" align="center" height="21">


      <td width="109" align="left" height="21">
<input type="Button" onclick="document.getElementById('answer').value = +document.getElementById('result').value + +document.getElementById('result1').value + +document.getElementById('result2').value" value="Get Total">
      </td> 

    </tr>
  </taBle>
 


</Body> 
</html>

**HippieChickie** · 02-10-2014, 10:46 PM

please ignore my last post from yesterday. i have spent the past several hours getting most of that working

i love this stuff & its the greatest feeling when you get somethign to work!! lol my coding is terrible as there are still several functions that can prob be put together but when I do they never work!

I tried to use what you gave me the 1st time as a reference but I keep getting a NaN error. 1 have 4 checkboxes. when you check a any checkbox a +5 will show under it. I want to have those numbers be added together. if 2 checkboxes are checked the total would 10 or 3 = 15 etc. also, when the checkbox is checked the textbox next to it becomes disabled but I need it to be disabled showing a value of 71 until the user unclicks the checkbox which will then reset it. speaking of which, this may seem like a stupid quest but when the user inputs a number there is no way for them to remove or change it unless they swipe it & remove/change it that way. how can I get the little x you always see in the corner for the user to click on that to remove their input. I have limited space to work with so I don't want to add another button if I can avoid it. one last thing please. when the user removes their number the output still remains as if the user imputed number was set at 0.

posted below is my code & thanks in advance for your time.
---------------------------------------

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function calc(A,SUM) {
	var one = document.getElementById(A).value;
	document.getElementById(SUM).value = 71 - one;
	document.getElementById('answer').value =  +document.getElementById('result1').value + +document.getElementById('result2').value + +document.getElementById('result3').value+ +document.getElementById('result4').value
	}
</script>


<script type="text/javascript">
function calcS() {
	
	document.getElementById('Sanswer').value =  +document.getElementById('divid1').value + +document.getElementById('result1').value
	}
</script>



<script type="text/javascript">

function calcp1() {
var el, p1 = 0;
var totalp1 = 0;


while(el = document.getElementsByName("p1p1")[p1++]) {
if(el.checked) { totalp1= totalp1 + Number(el.value);}

}
//alert(total);
var div1 = document.getElementById('divid1');
div1.innerHTML = "+" +totalp1; 
}
</script>

<script type="text/javascript">

function calcp2() {
var el, p2 = 0;
var totalp2 = 0;

while(el = document.getElementsByName("p1p2")[p2++]) {
if(el.checked) { totalp2= totalp2 + Number(el.value);}


}
//alert(total);
var div2 = document.getElementById('divid2');
div2.innerHTML = "+" +totalp2; 

}
</script>

<script type="text/javascript">

function calcp3() {
var el, p3 = 0;
var totalp3 = 0;


while(el = document.getElementsByName("p1p3")[p3++]) {
if(el.checked) { totalp3= totalp3 + Number(el.value);}


}
//alert(total);
var div3 = document.getElementById('divid3');
div3.innerHTML = "+" +totalp3; 

}
</script>


<script type="text/javascript">

function calcp4() {
var el, p4 = 0;
var totalp4 = 0;


while(el = document.getElementsByName("p1p4")[p4++]) {
if(el.checked) { totalp4= totalp4 + Number(el.value);}


}
//alert(total);
var div4 = document.getElementById('divid4');
div4.innerHTML = "+" +totalp4; 

}
</script>
<script type="text/javascript" language="javascript">
    function enableP1()
    {
        if (document.getElementById("p1p1").checked == false)
            document.getElementById("sum1").disabled = false;
        else
            document.getElementById("sum1").disabled = true;
    }
    
        </script>


<script type="text/javascript" language="javascript">
    function enableP2()
    {
        if (document.getElementById("p1p2").checked == false)
            document.getElementById("sum2").disabled = false;
        else
            document.getElementById("sum2").disabled = true;
    }
    
        </script>
    
    <script type="text/javascript" language="javascript">
    function enableP3()
    {
        if (document.getElementById("p1p3").checked == false)
            document.getElementById("sum3").disabled = false;
        else
            document.getElementById("sum3").disabled = true;
    }
    </script>

    <script type="text/javascript" language="javascript">
    function enableP4()
    {
        if (document.getElementById("p1p4").checked == false)
            document.getElementById("sum4").disabled = false;
        else
            document.getElementById("sum4").disabled = true;
    }
    </script>
</head>
<Body>


<hr>
<taBle height="109" width="807">
    <tr>
      <td width="201" align="center" height="41">
      <p align="center">
      </td>
      <td width="201" align="center" height="41">
      </td>
      <td width="201" align="center" height="41">
      </td>
      <td width="202" align="center" height="41">

      </td>



      <td width="202" align="center" height="41">

      </td>



    </tr>
    <tr>
      <td width="201" align="center" height="42">

         
<input name="sum1" id="op1" onkeyup="calc('op1','result1')"  size="2" maxlength="2" /><input type="checkBox" name="p1p1" value="5" onclick="calcp1(); enableP1();">
      </td>
      <td width="201" align="center" height="42">
<input name="sum2" id="op2" onkeyup="calc('op2','result2')" size="5" maxlength="2"/><input type="checkBox" name="p1p2" value="5" onclick="calcp2(); enableP2();">
      </td>
      <td width="201" align="center" height="42">
<input name="sum3" id="op3" onkeyup="calc('op3','result3')" size="5" maxlength="2"/><input type="checkBox" name="p1p3" value="5" onclick="calcp3(); enableP3();">
      </td>
      <td width="202" align="center" height="42">
<input name="sum4" id="op4" onkeyup="calc('op4','result4')" size="5" maxlength="2" /><input type="checkBox" name="p1p4" value="5" onclick="calcp4(); enableP4();">

      </td>



      <td width="202" align="center" height="42">

      </td>



    </tr>
    <tr>
      <td width="201" align="center" height="42">
      <input name="sum1" id="result1" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
      <br><div id="divid1" style="color: blue; width: 37; height: 19"></div>

      </td>
      
      <td width="201" align="center" height="42">
      <input name="sum2" id="result2" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
      <br><div id="divid2" style="color: green; width: 37; height: 19"></div>

      </td>
      
      <td width="201" align="center" height="42">
      <input name="sum3" id="result3" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
      <br><div id="divid3" style="color: red; width: 37; height: 19"></div>

      </td>
      <td width="202" align="center" height="42">
      <input name="sum4" id="result4" size="2" readonly style="font-size: 12pt; font-family: MV Boli; font-weight: Bold; Border-style: none; Border-width: 0px">
<br><div id="divid4" style="color: yellow; width: 37; height: 19"></div>
      </td>
      <td width="202" align="center" height="42">


      </td>
    </tr>
    <tr>

      <td width="201" align="center" height="42">
          </td>
      <td width="201" align="center" height="42">
          </td>
      <td width="201" align="center" height="42">
      </td>
      <td width="202" align="center" height="42">


      <td width="202" align="center" height="42">


<INPUT NAME="Sanswer" id="Sanswer" SIZE=5 DISABLED
      </td>

    </tr>
    <tr>

      <td width="201" align="center" height="42">
          </td>
      <td width="201" align="center" height="42">
          </td>
      <td width="201" align="center" height="42">
      </td>
      <td width="202" align="center" height="42">


      <td width="202" align="center" height="42">


<INPUT TYPE=TEXT NAME="answer" id="answer" SIZE=5 DISABLED
      </td>

    </tr>
    <tr>
      <td width="201" align="center" height="42">
          </td>
      <td width="201" align="center" height="42">
          </td>
      <td width="201" align="center" height="42">
      </td>
      <td width="202" align="center" height="42">


      <td width="202" align="center" height="42">


<input type="Button" onclick="document.getElementById('Sanswer').value = +document.getElementById('result1').value + +document.getElementById('divid1').value" value="Get Total">

    </tr>
  </taBle>

</Body> 
</html>

**jscheuer1** · 02-15-2014, 03:41 AM

What you want to have happen seems arbitrary to me because there's no obvious why, nor obvious reason for the value 71 or 5. Because of that it's hard for me to follow exactly. If you could explain why you are doing this and what those values represent, it would help me to help you. In the meantime, I can see what you're doing with the checkboxes and the disabling of the the inputs, for that you can do:

Code:

<script type="text/javascript">
function enableP(box, txt){
	document.getElementById(txt).disabled = box.checked;
}
</script>

HTML Code:

      <td width="201" align="center" height="42">

         
<input type=text name="sum1" id="op1" onkeyup="calc('op1','result1')" maxlength="2" /><input type="checkBox" name="p1p1" value="5" onclick="calcp1(); enableP(this, 'op1');">
      </td>
      <td width="201" align="center" height="42">
<input name="sum2" id="op2" onkeyup="calc('op2','result2')" size="5" maxlength="2"/><input type="checkBox" name="p1p2" value="5" onclick="calcp2(); enableP(this, 'op2');">
      </td>
      <td width="201" align="center" height="42">
<input name="sum3" id="op3" onkeyup="calc('op3','result3')" size="5" maxlength="2"/><input type="checkBox" name="p1p3" value="5" onclick="calcp3(); enableP(this, 'op3');">
      </td>
      <td width="202" align="center" height="42">
<input name="sum4" id="op4" onkeyup="calc('op4','result4')" size="5" maxlength="2" /><input type="checkBox" name="p1p4" value="5" onclick="calcp4(); enableP(this, 'op4');">

      </td>

To answer your question about the little x in a text input field that allows one to clear it, that's a proprietary feature of recent IE and perhaps other browsers. In IE it stops being available if the text input is too short (narrow). I found that by setting them to at least 7em width, that feature returned. If that's not something you want to do (make the inputs wider) and/or you would want that feature for all browsers, an alternative could be arranged. It would be a bit more complicated though.

**HippieChickie** · 02-15-2014, 06:06 PM

hello again.

thanks for your reply & your help. the easiest way to explain is im working on a tiebreaker page for a game like sorry!. the 71 was the total spaces it takes from start to home & the 5 was the points you got extra if still in your start when the game ended. i have since worked that out, ty. re: the little x... ill have to see i can fit the input box in the space alloted if at 7. i dont expect them to have to erase it, but good to know for future pages.

the problem i seem to be having now is when player 1 picks a pawn color (blue, red, green or yellow) using a radio button, that same color pawn for player 2 needs to be disabled. now i have it working for blue but using the same concept for the other colors, i cant get it working. i have tried to seperate the functions, rename them, etc... it just doesnt make sence that it works for blue but not the others when the code is the same except the ids.

pasted below is my code. agian, any advice is appreciated.
thanks, nicole

--------------------

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>example</title>

<script type="text/javascript"> 
function showP1 (it, hide1, hide2, hide3, box) { 
document.getElementById(it).style.display = "block"; 
document.getElementById(hide1).style.display = "none"; 
document.getElementById(hide2).style.display = "none"; 
document.getElementById(hide3).style.display = "none"; 
 
} 
</script>

<script type="text/javascript"> 
function showP2 (it2, hide5, hide6, hide7, box) { 
document.getElementById(it2).style.display = "block"; 
document.getElementById(hide5).style.display = "none"; 
document.getElementById(hide6).style.display = "none"; 
document.getElementById(hide7).style.display = "none"; 
 
} 
</script>

<style type="text/css">
.divstyle
{
display: none;

}
</style>
<script type="text/javascript">
	function hideB2(obj) {
		document.getElementById(obj).style.visibility = "hidden";
	}
 	function showB2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
	
 function hideG2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
function showG2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
 function hideR2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
function showR2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
 function hideY2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
function showY2(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}

 
</script>


</head>
<body>
<p>

<br /> 
 
<input type="radio" name="radio1" id=chooseB1 onclick="showP1('showBp1', 'showGp1', 'showRp1', 'showYp1', this); hideB2('chooseB2'); showG2('chooseG2'); showR2('chooseR2'); showY2('chooseY2');" /> Blue1   
<input type="radio" name="radio1" id=chooseG1 onclick="showP1('showGp1', 'showRp1', 'showYp1', 'showBp1', this); hideG2('chooseG2'); showR2('chooseR2'); showY2('chooseY2'); showB2('chooseB2');" /> Green1  
 <input type="radio" name="radio1" id=chooseR1 onclick="showP1('showRp1', 'showYp1', 'showBp1', 'showGp1', this); hideR2('chooseR2'); showY2('chooseY2'); showG2('chooseG2'); showB2('chooseB2');" />  Red1   
 <input type="radio" name="radio1" id=chooseY1 onclick="showP1('showYp1', 'showBp1', 'showGp1', 'showRp1', this); hideY2('chooseY2'); showR2('chooseR2'); showG2('chooseG2'); showB2('chooseB2');" /> Yellow1</p>  
  
<div class="divstyle" id="showBp1">Player 1 is Blue!</div>  
<div class="divstyle" id="showGp1">Player 1 is Green!</div>  
<div class="divstyle" id="showRp1">Player 1 is Red!</div>  
<div class="divstyle" id="showYp1">Player 1 is Yellow!</div>  
<hr>  
<p>  
<input type="radio" name="radio1" id=chooseB2 onclick="showP2('showBp2', 'showGp2', 'showRp2', 'showYp2', this)" /> Blue2   
<input type="radio" name="radio1" id=chooseG2 onclick="showP2('showGp2', 'showRp2', 'showYp2', 'showBp2', this)" />   Green2   
<input type="radio" name="radio1" id=chooseR2 onclick="showP2('showRp2', 'showYp2', 'showBp2', 'showGp2', this)" /> Red2   
<input type="radio" name="radio1" id=chooseY2 onclick="showP2('showYp2', 'showBp2', 'showGp2', 'showRp2', this)" />  Yellow2</p>  
  
<div class="divstyle" id="showBp2">Player 2 is Blue!</div>  
<div class="divstyle" id="showGp2">Player 2 is Green!</div>  
<div class="divstyle" id="showRp2">Player 2 is Red!</div>  
<div class="divstyle" id="showYp2">Player 2 is Yellow!</div> 


</body>  
</html>

**HippieChickie** · 02-15-2014, 06:47 PM

lol i guess you will get to see this post b4 the other one gets approved.

as an afterthought, i currently have everything else working by clicking on the pawns themselves not a radio button. i thought the only way i could do what i wanted would be to go that route, but if it is possible to acchieve the same thing using the pawn images i would prefer that. images are all named bpawn1, gpawn1 etc for player 1, bpawn2, gpawn2 etc for player 2... thanks for all the time & effort you put into these forums.

nicole

8:23p est...
I have since got this working!!! thanks for your help. you have been wonderful. have a good night.