Why won't these two forms on the same page work?

JavaScript
1

Why won’t these two forms on the same page work? If I remove one form, then the other works fine. Yes, I’m new at JS!

Also, what does size=“8” do for the field? I’ve changed the number and see little difference.

Regards,
Steve

<p>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="alignright">
<form id="formFahCel">Degrees Fahrenheit <input class="display2" type="number" size="8" value="" name="FAH">
 </td>
 </tr>
<tr>
<td class="alignright">
<input id="calcCEL" class="buttPress2" type="button" value="Celsius =">  
<input class="display2" size="8" type="number" name="ansCEL" value="">
</td>
</tr>
</form>
</table>
</p>


<p>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="alignright">
<form name="formCelFah">Degrees Celsius <input class="display2" type="number" name="CEL" size="8" value="">
 </td>
 </tr>
<tr>
<td class="alignright">
<input id="calcFAH" class="buttPress2" type="button" value="Fahrenheit =">  
<input class="display2" size="8" type="number" name="ansFAH" value="">
</td>
</tr>
</form>
</table>
</p>



<SCRIPT LANGUAGE="JavaScript">

function convertFahCel(form) {
var a = form.elements.FAH.value,
    c =(a-32)/1.8;
    form.elements.ansCEL.value = c;
}
 
 function convertCelFah(form) {
var a = form.elements.CEL.value,
    f=(a*1.8)+32;
    form.elements.ansFAH.value = f;
}

var form = document.getElementById('formFahCel');
calcCEL.onclick = function () {
    convertFahCel(form);
}    

var form = document.getElementById('formCelFah');
calcFAH.onclick = function () {
    convertCelFah(form);
}

</SCRIPT>

</body>
</html>
2 
calcCEL.onclick = function () {
    convertFahCel(form);
}

Use the error console.

You cannot reference an element directly by its ID. Use document.getElementById.

You can dispense with the form reference:

<script type="text/javascript">

function convertFahCel(form) {
var a = form.elements.FAH.value,
    c =(a-32)/1.8;
    form.elements.ansCEL.value = c;
}
 
 function convertCelFah(form) {
var a = form.elements.CEL.value,
    f=(a*1.8)+32;
    form.elements.ansFAH.value = f;
}



document.getElementById('calcCEL').onclick = function () {
    convertFahCel( this.form );
}    



document.getElementById('calcFAH').onclick = function () {
    convertCelFah( this.form );
}

</script>
3

Primarily due to the value of the form variable bring retrieved by the function as a global variable.

Try this instead:


calcCEL.onclick = function () {
    var form = document.getElementById('formFahCel');
    convertFahCel(form);
}    

calcFAH.onclick = function () {
    var form = document.getElementById('formCelFah');
    convertCelFah(form);
}
4

Thanks! But with this change, the top form button works, but the bottom form button does not.

That’s an improvement over neither button working, but still needs work!

Thanks,
Steve

5

Check the name of the form identifier that the script is attempting to access, compared with the identifier on the form.

You’ll find that there’s a not-so-subtle difference between the two.

6

“name” should be “id”!

Thanks!

Steve