不能用js调用函数答案

【问题标题】：Can't invoke a function with js不能用js调用函数
【发布时间】：2015-04-08 12:26:58
【问题描述】：

这是我的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 问题？

【问题讨论】：

因为你的小提琴设置错误！代码在 onload 事件中。 jsfiddle.net/zvrywbLr
再努力一点@mattytommo
在 JSFiddle 中，您需要将 JavaScript 换行设置为 "No wrap - in <head>" 否则您会得到一个 " Uncaught ReferenceError: calculateFun is not defined" 错误。
哦，好的，tnks 成功了。在原始代码中，我是否需要将其放在 head 标签之间？因为，我在 body 标签之间有一个函数，它工作正常..
对于 perf，除非脚本实际上需要先运行，否则通常最好将 script 标签放在结束 body 标签之前，否则会阻塞。

标签： javascript html onkeyup

【解决方案1】：

在 JSFiddle 中，您需要将 JavaScript wrap 设置为 "No wrap - in <head>" 否则您将收到“Uncaught ReferenceError: calculateFun is未定义”错误。

确保函数在这里：

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

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

function calculateFun() {

到这里：

window.calculateFun = function() {

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

【讨论】：

【解决方案2】：

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

在第二个选择框中你必须选择：

没有换行 - 在

或

没有换行 - 在

然后它将起作用。如果你不这样做，该函数将不会被定义，它只会运行一次（在 OnLoad 事件中）。

【讨论】：

【解决方案3】：

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

你在运行 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);

});

【讨论】：

这会在网站/应用程序中引入不必要的开销，这会对性能产生很大影响。通常你应该只使用你需要的东西，所以只要他处理简单的东西，使用外部库不会节省足够的编码或带来新的和有用的功能，plain 是要走的路。顺便说一句，在我看来，他只是从 JS 开始，所以无论如何他都需要实践和经验。