why my code not executing in web page

[aripurwahyudi]

dear all,

for 2 day ago, i have re-read and re-write my code
in first i have very very broken code execution in web
in second : being supported by mr. twain (thanks for support), i re write the code and in previewer browser ( i use mozilla 3.6.8) its work off line, but when i have implanting in web page, its not work, :(,
in 3rd, with mr.airshow support i have rewrite and it work on web page (thanks mr. airshow)
but still in my mind, again :

Question :

1. Why the 2nd code can not execution in web page ?
2. How the code must be to load in web page ? Any rules ?

here are the code :

<script language="JavaScript">
function hitungmbr(formID) {
 var formObj = document.getElementById(formID)
 if (formObj) {
 var bb = parseFloat(formObj.bb.value, 10);
 var tb = parseFloat(formObj.tb.value, 10);
 var umur = parseFloat(formObj.umur.value, 10);
 var kelamin = parseInt(formObj.kelamin.options[formObj.kelamin.selectedIndex].value, 10); // menunjuk value pilihan jenis kelamin
 if (kelamin==0) { // digunakan dengan pilihan langsung pada bagian pilihan ke-1 :laki-laki
    formObj.bmr.value = 66 + (bb * 13.7)+(tb *5)- (umur * 6.8);
	// Rumus aslinya = 66 + ( 13.7 x berat kg ) + ( 5 x tinggi cm ) - ( 6.8 x umur tahun ) 
         }
	else {		// ini bila kita tidak memilih di pilihan satu :perempuan maka rumus yang dipakai menjadi    
			 
             formObj.bmr.value = 655 + (bb*9.6)+(tb *1.8)- (umur * 4.7);
	// Rumus aslinya = BMR = 655 + ( 9.6 x berat kg ) + ( 1.8 x tinggi cm ) - ( 4.7 x umur tahun )
              } 
			 
	         }
          }
function hitungkalori(formID) {
var formObj = document.getElementById(formID)
if (formObj) {
var bmr = parseFloat(formObj.bmr.value, 10);
var kegiatan = parseInt(formObj.kegiatan.options[formObj.kegiatan.selectedIndex].value, 10); // menunjuk pilihan jenis kegiatan
if (kegiatan==0) { 
formObj.kalori.value =  bmr * 1.2; 
}
if (kegiatan==1) { 
formObj.kalori.value = bmr * 1.375; 
}
if (kegiatan==2) { 
formObj.kalori.value = bmr * 1.55; }
if (kegiatan==3) { 
formObj.kalori.value = bmr * 1.725; 
}
if (kegiatan==4) { 
formObj.kalori.value = bmr * 1.9; 
} 
}
}

</script>

<form action="" method="post" name="penghitungkaloriharian" id="penghitungkaloriharian">
  <table width="358" border="1" bgcolor="#FFFF91" summary="Adalah tabel yang digunakan untuk menghitung kebutuhan kalori harian anda. Tabel ini mempresentasikan kebutuhan kalori anda berdasarkan jenis kelamin dan jenis kegiatan harian anda. Di adaptasi dari Penghitungan Harris-Benedict.">
    <caption align="top" class="style6">
    Tabel Penghitung Kebutuhan Kalori
    </caption>
    <tr>
      <th width="186" class="style3" scope="col"><div align="left" class="style3">
        <div align="right">Saya adalah seorang : </div>
      </div></th>
      <th width="173" scope="col"><div align="left">
        <select name="kelamin" size="1" class="style6" id="kelamin">
            <option selected value=0>Laki - laki</option>
            <option value=1 >Perempuan</option>
        </select>
      </div></th>
    </tr>
    <tr>
      <td class="style3"><div align="right">Berat Badan </div></td>
      <td><input name="bb" type="text" class="style6" id="bb" size="4"> 
        <span class="style5">kg</span> </td>
    </tr>
    <tr>
      <td class="style3"><div align="right"><span class="style1">Tinggi Badan </span></div></td>
      <td class="style5"><input name="tb" type="text" class="style6" id="tb" size="4"> 
      cm </td>
    </tr>
    <tr>
      <td class="style3"><div align="left" class="style1">
        <div align="right">Umur<span class="style7"> </span></div>
      </div></td>
      <td><input name="umur" type="text" class="style6" id="umur" size="4"> 
        <span class="style5">tahun </span></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center"><span class="style1">
      <input name="Button" type="button" class="style3" value="Hitung BMR" onclick = "hitungmbr('penghitungkaloriharian')" >
</span></div></td>
    </tr>
    <tr>
      <td class="style3"><div align="right">BMR anda : </div></td>
      <td><input name="bmr" type="text" class="style9" id="bmr" size="5" readonly></td>
    </tr>
    <tr>
      <td height="33"><div align="right"><span class="style1">
          <span class="style3">Jenis kegiatan yang akan anda lakukan sehari- hari :</span>
      </span></div></td>
      <td><select name="kegiatan" size="1" class="style6" id="kegiatan">
        <option selected value=0>Tanpa Kegiatan</option>
        <option value=1>Kegiatan Ringan</option>
        <option value=2>Kegiatan Sedang</option>
        <option value=3>Kegiatan Berat</option>
        <option value=4>Kegiatan Sangat Berat</option>
            </select></td>
    </tr>
    <tr>
      <td colspan="2" class="style3"><div align="center"><span class="style1">
          <input name="Button" type="button" class="style3" value="Hitung Kalori Harian" onclick = "hitungkalori('penghitungkaloriharian')">
      </span></div></td>
    </tr>
    <tr>
      <td><div align="right"><span class="style3">Kalori yang anda butuhkan dalam sehari : </span></div></td>
      <td><input name="kalori" type="text" class="style10" id="kalori" size="5" readonly> 
        <span class="style10">kalori </span></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p class="style4">&nbsp;</p>
</form>

Please,
anybody can help explaining that ?

very thanks.

[Airshow]

Ari,

The general form of a web page is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">

</style>

<script>

</script>
</head>
<body>

</body>
</html>

The !DOCTYPE can vary but XHTML 1.0 Transitional is a pretty good one to become familiar with. For much of what you are likely to do, the choice of !DOCTYPE is not critical.

Your web page is essentially sound (good) but needs a bit of tidying. Using the above template, it should look something like this (based on the version in your private message):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rumus Penghitung Kalori</title>
<style type="text/css">
table.kalori {
	width: 358px;
	border: 1px solid #999966;
}
table.kalori input, table.kalori select, table.kalori caption { font-weight: bold; }
table.kalori th, table.kalori td {
	padding:1px 3px;
	background-color: #FFFF91;
	border: 1px solid #999966;
	font-weight: bold;
}
table.kalori th { text-align: right; }
table.kalori .style1 { color: #000099 }
table.kalori .style4 { color: #006600 }
table.kalori .style5 { color: #CC00FF; }
table.kalori .style7 { color: #914800 }
table.kalori .style9 { color: #09918A; }
table.kalori .style10 { color: #C90110; }
</style>
<script language="JavaScript">
onload = function(){
	function hitungmbr(formObj) {
		if(formObj) {
			var bb = parseFloat(formObj.bb.value, 10);
			var tb = parseFloat(formObj.tb.value, 10);
			var umur = parseFloat(formObj.umur.value, 10);
			var kelamin = parseInt(formObj.kelamin.options[formObj.kelamin.selectedIndex].value, 10); // menunjuk value pilihan jenis kelamin
			var constants = [];//empty Array
			constants[0] = [66, 13.7, 5, 6.8];//array of values //digunakan dengan pilihan langsung pada bagian pilihan ke-1 :laki-laki
			constants[1] = [655, 9.6, 1.8, 4.7];//array of values //ini bila kita tidak memilih di pilihan satu :perempuan maka rumus yang dipakai menjadi
			formObj.bmr.value = constants[kelamin][0] + (bb * constants[kelamin][1])+(tb * constants[kelamin][2])- (umur * constants[kelamin][3]);
		}
	}
	function hitungkalori(formObj) {
		if(formObj) {
			var bmr = parseFloat(formObj.bmr.value, 10);
			var kegiatan = parseInt(formObj.kegiatan.options[formObj.kegiatan.selectedIndex].value, 10); // menunjuk pilihan jenis kegiatan
			var constants = [1.2, 1.375, 1.55, 1.725, 1.9];//array of values
			formObj.kalori.value =  bmr * constants[kegiatan];
		}
	}
	var kaloriForm         = document.getElementById('penghitungkaloriharian');
	var hitungmbrButton    = document.getElementById('hitungmbr');
	var hitungkaloriButton = document.getElementById('hitungkalori');
	hitungmbrButton.onclick    = function(){ hitungmbr(kaloriForm); }
	hitungkaloriButton.onclick = function(){ hitungkalori(kaloriForm); };
};
</script>
</head>

<body>

<form id="penghitungkaloriharian" name="penghitungkaloriharian" action="" method="post">
<table class="kalori" border="0" cellspacing="2" summary="Adalah tabel yang digunakan untuk menghitung kebutuhan kalori harian anda. Tabel ini mempresentasikan kebutuhan kalori anda berdasarkan jenis kelamin dan jenis kegiatan harian anda. Di adaptasi dari Penghitungan Harris-Benedict.">
<caption align="top" class="style4">Tabel Penghitung Kebutuhan Kalori</caption>
<tr>
<th class="style1" scope="col">Saya adalah seorang</th>
<td scope="col"><select id="kelamin" name="kelamin" size="1" class="style4">
    <option value="0" selected>Laki - laki</option>
    <option value="1" >Perempuan</option>
</select></td>
</tr><tr>
<th class="style1">Berat Badan</th>
<td class="style5"><input id="bb" name="bb" type="text" class="style4" size="4">&nbsp;kg</td>
</tr><tr>
<th class="style1">Tinggi Badan</th>
<td class="style5"><input id="tb" name="tb" type="text" class="style4" size="4">&nbsp;cm</td>
</tr><tr>
<th class="style1">Umur</th>
<td class="style5"><input id="umur" name="umur" type="text" class="style4" size="4">&nbsp;tahun</td>
</tr><tr>
<td colspan="2" align="center"><input id="hitungmbr" name="Button" type="button" class="style1" value="Hitung BMR"></td>
</tr><tr>
<th class="style1">BMR anda</th>
<td><input id="bmr" name="bmr" type="text" class="style9" size="5" readonly></td>
</tr><tr>
<th class="style1">Jenis kegiatan yang akan anda lakukan sehari- hari</th>
<td><select id="kegiatan" name="kegiatan" size="1" class="style4">
    <option value="0" selected>Tanpa Kegiatan</option>
    <option value="1">Kegiatan Ringan</option>
    <option value="2">Kegiatan Sedang</option>
    <option value="3">Kegiatan Berat</option>
    <option value="4">Kegiatan Sangat Berat</option>
    </select></td>
</tr><tr>
<td colspan="2" align="center"><input id="hitungkalori" name="Button" type="button" class="style1" value="Hitung Kalori Harian"></td>
</tr><tr>
<th class="style1">Kalori yang anda butuhkan dalam sehari</th>
<td class="style10"><input id="kalori" name="kalori" type="text" class="style10" size="5" readonly>&nbsp;kalori</td>
</tr>
</table>
</form>

</body>
</html>

Please note that I have simplified the (X)HTML quite significantly, mainly by purging DIVs and SPANs inside TDs, in favour of applying styles to the the TD elements themselves.

Giving the table id="kalori" and prefixing all the styles with table.kalori makes all these styles (reasonably) independent of other styles on the same page.

The javascript is simplified about as far as possible. It will look a little strange because it is now set inside an onload function. This is done in order to avoid "polluting the global namespace", which is generally avoided these days.

Also, onclick behaviours are attached in javascript rather than in the HTML. It is worth trying to understand this as it becomes increasingly important as web pages become larger and more complex.

You will notice that the 3 calls to document.getElementById are made just once regardless of how many times the user clicks to perform the calculations. Again, this will be important to you in larger, more complex web pages.

Good luck

Airshow

[aripurwahyudi]

very thanks, for mr. airshow
really i know for now about the rules of choicing about your explaining above

and very thanks for your support to uploading this on the post
and i hope anyone can get benefit from this forum....
i really appriciate for this mr. airshow, and very thanks for the explaining me more then i know as a newbie in js

once again very thanks
good luck too for you mr. airshow

regards