无法用js调用函数

Question

这是我的 html 和 js:

function calculateFun()
{
 var a = document.getElementById('a').value;
 var b = document.getElementById('b').value;
 var c = document.getElementById('c').value;
 var d = document.getElementById('d').value;
 var e = document.getElementById('e').value;
 
 var f = a*b;
 document.getElementById('f').value = f;
 var g = (f + (f*(d/100))).toFixed();
 document.getElementById('g').value = g;
 var h = ((1 -((a*c)/e))*100).toFixed();
 document.getElementById('h').value = h;
 
}

<input type="number" id="a" onkeyup="calculateFun();" />
<input type="number" id="b" onkeyup="calculateFun();" />
<input type="number" id="c" value="100" />
<input type="number" id="d" value="50" />
<input type="number" id="e" onkeyup="calculateFun();" />
<br><br><p>******</p><br><br>
<input type="number" id="f" />
<input type="number" id="g" />
<input type="number" id="h" />

我在 JSFIDDLE 中试过这段代码： https://jsfiddle.net/1ex3b1sa/

但它不起作用。同样在我的站点中，该函数未被调用。这很奇怪，因为我可以调用我所做的其他功能，几乎以相同的方式。

我尝试更改为 onclick、onkeypress 或 onkeydown，但看不到任何结果..

有什么想法吗？也许我有错字？或者可能是 chrome 问题？

Answer 1

在 jsfiddle.net 的左侧是一个带有 "Frameworks & Extensions" 的框。

在第二个 select 框中，您必须 select:

No wrap - in <body>

或

No wrap - in <head>

然后就可以了。如果你不这样做，函数将不会被定义，它只会运行一次（在 OnLoad 事件中）。

Answer 2

在 JSFiddle 中，您需要将 JavaScript 换行设置为 "No wrap - in <head>" 否则您将收到 "Uncaught ReferenceError: calculateFun is not defined" 错误。

确保函数在这里：

<html>
    <head>
        <script type="text/javascript">
            function calculateFun() {
                // ...

您实际上可以将函数定义保留在 onLoad 包装中并更改：

function calculateFun() {

为此：

window.calculateFun = function() {

它会起作用，因为您将函数作为静态方法添加到浏览器的 Window。

Answer 3

请学习jquery，它并不难，会帮助你！

您的 fiddle 正常运作 jquery：https://jsfiddle.net/1ex3b1sa/3/

输入字段得到 class='calc' 和 js:

$('.calc').keyup(function(){

var a = $('#a').val();
var b = $('#b').val();
var c = $('#c').val();
var d = $('#d').val();
var e = $('#e').val();

var f = a * b;
$('#f').val(f);

var g = (f + (f*(d/100))).toFixed();
$('#g').val(g);

var h = ((1 -((a*c)/e))*100).toFixed();
$('#h').val(h);

});

无法用js调用函数

Can't invoke a function with js

html

javascript

onkeyup