script not working on web page

[mukhtar88]

Hi,

I just upload a calculator script on my webpage called "Void branch finder" on my website (It is in red color table)

http://fengshuihope.bravehost.com

It works fine in Frontpage but not when hosted.


The script is here when pasted inside body.
<div align="center">
<center>
<table border="5" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFCC66" width="358" id="AutoNumber1">
<tr>
<td width="358" align="center" bgcolor="#FF0000">
<p style="margin-top: 0; margin-bottom: 0">
<font size="2" face="Verdana">&nbsp;&nbsp;</font><font size="1" face="Verdana">&nbsp;&nbsp; </font>
<b>
<font size="2" face="Verdana" color="#FFFFFF">Void Branch Finder</font></b></p>
<p align="left" style="margin-top: 0; margin-bottom: 0">
<font face="Verdana" size="1">&nbsp;&nbsp;&nbsp; </font><b>
<font color="#FFFF99" size="1" face="Verdana">Select your Day Pillar</font><font size="1" color="#FFFFFF">&nbsp;</font><font size="1"><script type="text/javascript">
function setNumParticipants( inputId, outputId )
{
var p = document.getElementById( inputId );
var t = document.getElementById( outputId );
if(!p ) return;
if(!t ) return;
switch (p.value)
{
case "0":
// Set total value:
t.value = "";
// Add your function to show/hide other inputs here
break;
case "1":
// Set total value:
t.value = "Rat and Ox";
// Add your function to show/hide other inputs here
break;
case "2":
t.value = "Tiger and Rabbit";
// Add your function to show/hide other inputs here
break;
case "3":
t.value = "Dragon and Snake";
// Add your function to show/hide other inputs here
break;
case "4":
t.value = "Horse and Sheep";
// Add your function to show/hide other inputs here
break;
case "5":
// Set total value:
t.value = "Monkey and Rooster";
// Add your function to show/hide other inputs here
break;
case "6":
t.value = "Dog and Pig";
// Add your function to show/hide other inputs here
break;
case "7":
// Set total value:
t.value = "Rat and Ox";
// Add your function to show/hide other inputs here
break;
case "8":
t.value = "Tiger and Rabbit";
// Add your function to show/hide other inputs here
break;
case "9":
t.value = "Dragon and Snake";
// Add your function to show/hide other inputs here
break;
}
}
</script> </font><font size="2">&nbsp; </font>
<font face="Verdana" size="2">&nbsp; </font></b>
<font face="Verdana" size="1">&nbsp;<b><font color="#FFFF99">Your Void
Branches are</font></b></font></p>
<p align="left" style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp;



<select name="numParticipants" onchange="setNumParticipants('numParticipants','total');" style="width: 140; font-family: Verdana; font-size: 8pt; vertical-align: middle; border: 1px solid #000000; background-color: #FFCCCC; ">
<option selected>Select</option>
<option value="1">Yang Wood Tiger</option>
<option value="2">Yang Wood Dragon</option>
<option value="3">Yang Wood Horse</option>
<option value="4">Yang Wood Monkey</option>
<option value="5">Yang Wood Dog</option>
<option value="6">Yang Wood Rat</option>
<option value="7">Yin Wood Rabbit</option>
<option value="8">Yin Wood Snake</option>
<option value="9">Yin Wood Sheep</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="total" id="total" readonly="readonly" size="19" style="border: 0px solid #FFFFFF; background-color: #FF0000; color:#FFFFFF; width:138; font-size:8pt; font-family:Verdana; font-weight:bold"> </td>
</tr>
</table>
</center>
</div>

The answers are in white font just below the word "You void branch are"
Please check through the view source of my webpage address given above and below, why the answers do not show on the screen.

http://fengshuihope.bravehost.com

Please help,

I am not good at javascript.

regards,
Mukhtar

[jscheuer1]

The first problem is that fengshui is baloney. Not much we can do about that here.

The second problem is that the function expects an id for both the input and output elements, change 'name' to 'id' here:


<select id="numParticipants" onchange="setNumPartici . . .

The third problem is that the output element has invalid style, and so is rendering its data in black text on a black background. Change its style like so:


<input type="text" name="total" id="total" readonly="readonly" size="19" style="border: 0px solid #FFFFFF; background-color: #000000;color:#FFFFFF; width:138; font-size:8pt; font-family:Verdana; font-weight:bold">

After making the above changes to a local mock up of your page, things worked. There could be other problems.

[mukhtar88]

Dear John, (jscheuer1)

Thanks a lot for finding out the mistake which I had committed in the script.
I corrected it off and it really worked.

Thanks a lot.

Regards,
Mukhtar