電卓の代替形式

Question

私は以下の現在のコードを使用しています。問題は、このコードがフォームにあり、ネストされたフォームを持つことができないことです。コードを変更するにはformの代わりにdivの親要素を使用しますか？

<form> 
<script type="text/javascript"> 
    function inmet(form){ 
     form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2) 
    } 
</script> 
<div id="calcbody"> 
    <div class="calctitle">Convert <br />Inches to Millimetres</div> 
    <div class="singcalcquestion">Enter the Inches: 
     <input class="box1" type="text" name="inch" /> 
    </div> 
    <div class="singsubmit"> 
     <input onclick="inmet(this.form)" type="button" value="GO" />  
    </div> 
    <div class="singcalcanswer">Equals in Millimetres:<br /> 
     <input class="calcbox2" type="text" readonly="readonly" name="in2met" /> 
    </div> 
</div> 
</form> 

Answer 1

1つのオプションは、あなたが望む入力フィールドを取得するためにElement.getElementsByClassName()または類似の方法を使用することです：

<div id="form-root"> 
    <script type="text/javascript"> 
    function inmet(calcRoot){ 
    calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2); 
    } 
    // example: inmet(document.getElementById('form-root')) 
    </script> 
    <div id="calcbody"> 
    <div class="calctitle">Convert <br />Inches to Millimetres</div> 
    <div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div> 
    <div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div> 
    <div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div> 
    </div> 
</div> 

Answer 2

ないクリーンなソリューションを、それが仕事をする必要があります。

<div> 
 
    <script> 
 
     function inmet() { 
 
      document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2) 
 
     } 
 
    </script> 
 
    <div id="calcbody"> 
 
     <div class="calctitle">Convert <br/>Inches to Millimetres</div> 
 
     <div class="singcalcquestion"> 
 
      <label for="inch">Enter the Inches:</label> 
 
      <input class="box1" type="text" name="inch" id="inch"/> 
 
     </div> 
 
     <div class="singsubmit"> 
 
      <input onclick="inmet()" type="button" value="GO"/> 
 
     </div> 
 
     <div class="singcalcanswer"> 
 
      <label for="in2met">Equals in Millimetres:</label> 
 
      <input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/> 
 
     </div> 
 
    </div> 
 
</div>