Question

我试图在外部函数中包装javascript文件的所有代码后调用内部函数，但是我的内部函数没有被调用。

以下是我的javascript：

(function(){

function calculateArea(){

    var a=parseInt(document.getElementById("sideA").value); 
    var b=parseInt(document.getElementById("sideB").value); 
    var c=parseInt(document.getElementById("sideC").value); 

    debugger;

    var perBy2= (a+b+c)/2;  

    var squareArea=  perBy2 * ( perBy2-a)*( perBy2-b)*( perBy2-c);

    var areaOf=Math.sqrt(squareArea);

    document.getElementById("area").innerHTML=areaOf;


}
})();

以下是我的html文件摘要。

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form action="">
    Side A : <input type="text" id=sideA placeholder="Side A"  required /><br>
    Side B :<input type="text" id=sideB placeholder="Side B" required /><br>
    Side C :<input type="text" id=sideC placeholder="Side B" required /><br>
    <button onClick="calculateArea()">Calculate the Area</button>
    </form>

    AREA IS:<div id="area"></div>
<script type="text/javascript" src="js/area.js"></script>
</body>
</html>

我删除了内联事件处理并根据我的IIFE中的建议添加了事件列表器后，所有问题都解决了。但是，我无法看到结果，因为值正在停止并且正在发生一个不需要的GET调用。

Remote Address:127.0.0.1:9999
Request URL:http://localhost:9999/JavaScriptQuestion/?
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:JSESSIONID=5CC7F1D56201D4DEB07FB6C56FF89125
Host:localhost:9999
Referer:http://localhost:9999/JavaScriptQuestion/?
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Response Headersview source
Content-Length:571
Content-Type:text/html;charset=ISO-8859-1
Date:Wed, 02 Jul 2014 05:20:20 GMT
Server:Apache-Coyote/1.1

Answer 1

您的内部函数包含在IIFE中，因此它不在全局范围内，因此无法通过内联点击处理程序调用，就像您在{{1}上一样}}

将函数移动到全局作用域，或者在JavaScript本身中指定单击处理程序，而不是内联HTML。

<button>

Answer 2

您的问题是（ab）使用内联事件处理程序，例如：

onClick="calculateArea()"

使用内联事件处理程序（已过时且不应使用），您只能调用全局范围内的方法。您对IIFE包装的使用已将您的预期功能隐藏在该范围内。

为您的按钮添加ID，并将其添加到IIFE中：

document.getElementById('mybutton').addEventListener('click', calculateArea, false);

注意加载DOM和执行脚本的顺序，以确保在执行此行时mybutton实际存在。

JavaScript Wrapper函数 - 未调用内部函数

2 个答案: