HTML表单onclick调用函数

时间：2016-01-15 09:22:18

标签： javascript

我正在尝试使用html表单来调用脚本，这已经有效，因为按钮“计算”确认（单击），但我的问题是我想用“输入”按钮进行计算。例如，如果“LMB”= 4000m，则应在不使用“计算”​​按钮的情况下计算。

 <pre><em>
    <table class="fl">   

    <tr><td>LMB:</td><td><form>
   <input type="number" name="points" id="LMB"
   min="800" max="8500" step="1" size="8" value="3000"  onclick="uebergabe()">   </form>
     </td></tr>
    <tr><td>AT:</td><td><form>
   <input type="number" name="AT" id="AT"
   min="2" max="12" step="1" size="8"value="2"></form>
   </td></tr>
   <tr><td>A:</td><td><form>
   <input type="number" name="points" id="A"
   min="45" max="70" step="25" size="8" value="45"></form>
   </td></tr>
   <tr><td>Z:</td><td><form>
   <input type="number" name="points" id="Z"
   min="6" max="10" step="1" size="8" value="8"></form>
   <tr><td>WM:</td><td id="LMB"></td></tr>
   <tr><td>WM:</td><td id="WM"></td></tr>
   <tr><td>STB:</td><td id="STB"></td></tr>
   <tr><td>LS4:</td><td id="LS4"></td></tr>
   <tr><td>LS2:</td><td id="LS2"></td></tr>
   <tr><td>LS3:</td><td id="LS3"></td></tr>
   <tr><td>LS1:</td><td id="LS1"></td></tr>
   <tr><td>FS:</td><td id="FS"></td></tr>
   <tr><td>RT:</td><td id="RT"></td></tr>
   <tr><td>Total:</td><td id="TOTAL"></td></tr>

    <tr><td></td><td><input type="button" id="taste" value="Berechnen"></td><td> </td></tr>

    </Table></em>
    window.onload = init;
    function init(){
    document.getElementById('taste').onclick = uebergabe;uebergabe();
}
    function uebergabe(){
    var Z = Number( document.getElementById('Z').value );
    var AT = Number( document.getElementById('AT').value );
    var LMB = Number( document.getElementById('LMB').value );
    var A = Number( document.getElementById('A').value );
    if (A>70 || A<45){ alert('Geben Sie fuer "A" einen Wert von 45 oder 70 
    ein'); return;}
    if (Z>10 || Z<6){ alert('Geben Sie einen Wert zwischen 6 und 10 ein');   return;}
   if (AT>10 || AT<-10){ alert('Geben Sie einen Wert zwischen 2 und 12 ein'); return;}
if (AT==0){ alert('Geben Sie einen Wert zwischen 2 und 12 ein'); return;}
if (LMB>8500 || LMB<800){ alert(' Geben Sie einen Wert zwischen 800 und 8500 ein '); return;}
if (STB>500 || STB<-500){ alert('STB sollte zwischen 500 und 1200 sein )'); return;}
var WM = LMB - Z;
var STB = WM / AT;
var LS4 = STB - (23.775 * AT) - 426.93;
var LS2 = (3.732 * STB) - (3.732 * LS4) - (69.975 * AT) + (A * AT) - (2 * A) + 80 + Z - 1524.9;
var LS3 = (3.864 * STB) - (3.864 * LS4) - (72.45 * AT) + (1.035 * A * AT) - (2.07 * A) - 1652.58;
var LS1 = LMB - 380 - LS2;
var FS = LMB;
var RT = (AT - 2) * A + 80 + 54 + 60 + Z;
var TOTAL = LS1 + LS2 + LS3 + LS4;

var LS2a = (3.732 * STB) - (3.732 * LS4) - (69.975 * AT) + (A * AT) - (2 * A) + 80 + Z - 1524.9;
var LS1a = LMB - 380 - LS2a;
var LS4a = STB - (23.775 * AT) - 426.93;
var LS3a = (3.864 * STB) - (3.864 * LS4a) - (72.45 * AT) + (1.035 * A * AT) - (2.07 * A) - 1652.58;
document.getElementById('WM').innerHTML = WM.toFixed(0);
document.getElementById('STB').innerHTML = STB.toFixed(0);
document.getElementById('LS4').innerHTML = LS4.toFixed(0);
document.getElementById('LS2').innerHTML = LS2.toFixed(0);
document.getElementById('LS3').innerHTML = LS3.toFixed(0);
document.getElementById('LS1').innerHTML = LS1.toFixed(0);
document.getElementById('LS1a').innerHTML = LS1a.toFixed(0);
document.getElementById('LS2a').innerHTML = LS2a.toFixed(0);
document.getElementById('LS3a').innerHTML = LS3a.toFixed(0);
document.getElementById('LS4a').innerHTML = LS4a.toFixed(0);
document.getElementById('FS').innerHTML = FS.toFixed(0);
document.getElementById('RT').innerHTML = RT.toFixed(0);
document.getElementById('TOTAL').innerHTML = TOTAL.toFixed(0);
}
</script>
</pre>

4 个答案:

答案 0 :(得分：0)

您应该在表单上使用onSubmit-Event：

document.getElementById('the-id-you-need-to-add-to-the-form').onsubmit = uebergabe;

答案 1 :(得分：0)

您忘记打开script - 标记，因此永远不会将其评估为JS代码。要解决这个问题，您只需要这样做; 

<pre>
  <em>
    <!--WAY TO LONG HTML HERE-->
  </em>
  <script>
    //MORE JS CODE
    function uebergabe(){
      //uebergabe function
    }
  </script>
</pre>

除此之外，您在HTML和JS中定义了在单击输入时应调用uebergabe，您应该删除其中一个。

答案 2 :(得分：0)

这是正确的JS（错误在代码上发表评论）

// The script tag was missing
window.onload = init;

function init() {
    document.getElementById('taste').onclick = uebergabe;uebergabe();
}

function uebergabe() {
    var Z = Number( document.getElementById('Z').value );
    var AT = Number( document.getElementById('AT').value );
    var LMB = Number( document.getElementById('LMB').value );
    var A = Number( document.getElementById('A').value );

    //String must be in one line
    if (A>70 || A<45){ alert('Geben Sie fuer "A" einen Wert von 45 oder 70 ein'); return;}
    if (Z>10 || Z<6){ alert('Geben Sie einen Wert zwischen 6 und 10 ein');   return;}
    if (AT>10 || AT<-10){ alert('Geben Sie einen Wert zwischen 2 und 12 ein'); return;}
    if (AT==0){ alert('Geben Sie einen Wert zwischen 2 und 12 ein'); return;}
    if (LMB>8500 || LMB<800){ alert(' Geben Sie einen Wert zwischen 800 und 8500 ein '); return;}
    if (STB>500 || STB<-500){ alert('STB sollte zwischen 500 und 1200 sein )'); return;}

    var WM = LMB - Z;
    var STB = WM / AT;
    var LS4 = STB - (23.775 * AT) - 426.93;
    var LS2 = (3.732 * STB) - (3.732 * LS4) - (69.975 * AT) + (A * AT) - (2 * A) + 80 + Z - 1524.9;
    var LS3 = (3.864 * STB) - (3.864 * LS4) - (72.45 * AT) + (1.035 * A * AT) - (2.07 * A) - 1652.58;
    var LS1 = LMB - 380 - LS2;
    var FS = LMB;
    var RT = (AT - 2) * A + 80 + 54 + 60 + Z;
    var TOTAL = LS1 + LS2 + LS3 + LS4;
    var LS2a = (3.732 * STB) - (3.732 * LS4) - (69.975 * AT) + (A * AT) - (2 * A) + 80 + Z - 1524.9;
    var LS1a = LMB - 380 - LS2a;
    var LS4a = STB - (23.775 * AT) - 426.93;
    var LS3a = (3.864 * STB) - (3.864 * LS4a) - (72.45 * AT) + (1.035 * A * AT) - (2.07 * A) - 1652.58;

    document.getElementById('WM').innerHTML = WM.toFixed(0);
    document.getElementById('STB').innerHTML = STB.toFixed(0);
    document.getElementById('LS4').innerHTML = LS4.toFixed(0);
    document.getElementById('LS2').innerHTML = LS2.toFixed(0);
    document.getElementById('LS3').innerHTML = LS3.toFixed(0);
    document.getElementById('LS1').innerHTML = LS1.toFixed(0);
    document.getElementById('LS1a').innerHTML = LS1a.toFixed(0);
    document.getElementById('LS2a').innerHTML = LS2a.toFixed(0);
    document.getElementById('LS3a').innerHTML = LS3a.toFixed(0);
    document.getElementById('LS4a').innerHTML = LS4a.toFixed(0);
    document.getElementById('FS').innerHTML = FS.toFixed(0);
    document.getElementById('RT').innerHTML = RT.toFixed(0);
    document.getElementById('TOTAL').innerHTML = TOTAL.toFixed(0);

}

关于HTML某些ID缺失

<tr><td>LS1a:</td><td id="LS1a"></td></tr> <!-- LS1a was missing -->
<tr><td>LS2a:</td><td id="LS2a"></td></tr> <!-- LS2a was missing -->
<tr><td>LS3a:</td><td id="LS3a"></td></tr> <!-- LS3a was missing -->
<tr><td>LS4a:</td><td id="LS4a"></td></tr> <!-- LS4a was missing -->

答案 3 :(得分：-1)

将所需字段绑定到onchange事件处理程序（或oninput，根据您的需要）。

例如： document.getElementById（＆＃39; LMB＆＃39;）。onchange = ...

有关详细信息，请参阅http://www.w3schools.com/jsref/event_onchange.asp

相关问题
最新问题