计算器表单备选方案

Calculator form alternative

本文关键字：方案 表单 计算器      更新时间：2024-02-20

我有下面的当前代码，它正在工作。问题是这个代码将在一个表单中，我不能有嵌套的表单。如何更改代码，使其与div父元素而不是form一起工作？

<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>

一种选择是使用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>

不是最干净的解决方案，但它应该完成任务：

<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>

相关文章：