JavaScript包装函数-未调用内部函数_Javascript

JavaScript包装函数-未调用内部函数

javascript

JavaScript包装函数-未调用内部函数,javascript,Javascript,在将javascript文件的所有代码包装到外部函数中之后，我试图调用内部函数，但我的内部函数没有被调用下面是我的javascript： (function(){ function calculateArea(){ var a=parseInt(document.getElementById("sideA").value); var b=parseInt(document.getElementById("sideB").value); var c=parseIn

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

您的内部函数被包装在中，因此它不在全局范围内，因此不能由内联单击处理程序调用，就像您在

上所做的那样

要么将函数移到全局范围，要么在JavaScript本身中指定click处理程序，而不是内联HTML

(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;
    }

    window.onload = function(){
        // give the button an ID, or use some other way to grab it
        document.getElementById("someid").onclick = calculateArea;
    };
})();

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

onClick="calculateArea()"

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

向按钮添加ID，并将其添加到iLife中：

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

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

mybutton

。

谢谢。我如何实现“在JavaScript本身中分配点击处理程序，而不是内联HTML”。@user3440629使用

window.onload

和

element.onclick

查看答案中的示例。谢谢。所以我必须从按钮中删除这个内联点击偶数处理程序，并在window.onloadYes上应用点击处理程序。如果代码是在元素呈现之后执行的（例如在结束正文标记之前），则可以省略

窗口。onload

包装器。您的函数绑定到

立即

函数的范围（而不是全局）。一个简单快捷的解决方法是使用

window.calculateArea=function

将回调直接分配到全局范围。这里有一个小问题：调试器中的

行是怎么回事？我刚刚添加它是为了查看我的代码执行是否在函数内部进行。等等，这实际上是一个断点。o不知道这是可能的：PUsing“window.calculateArea=function”是否会再次将我的函数放入全局范围？
document.getElementById('mybutton').addEventListener('click', calculateArea, false);