Question

我有下面的当前代码，这是有效的。问题是这个代码将在一个表单中，我不能有嵌套的表单。如何更改代码，因此这适用于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>

Answer 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

不是最干净的解决方案，但它应该完成这项工作：

＆＃13;

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

＆＃13;

计算器形式替代

2 个答案: