Question

我得到了一个简单的javascript片段，在按下onclick时会显示右边的div！

然而，在firebug上我得到的函数没有定义错误！我在左边有相同的功能，工作正常。这是我的代码..

<div id="cpBtnRgt" onclick="toggleCPRgt()">
    <div></div>
    <div></div>
    <div></div>
</div>
<script type="text/javascript">
    function toggleCPRgt(){
    var cpRgt = document.getElementById("cpRgt");
    cpRgt.style.height = window.innerHeight - 60+"px";
    if(cpRgt.style.right == "0px"){
        cpRgt.style.right = "-300px";
    } else {
        cpRgt.style.right = "0px";
    }
}
</script>

我还在这里设置了一个JSFiddle ...... http://jsfiddle.net/r6fkq3jt/

Answer 1

你的jsfiddle的问题是你的javascript函数被匿名函数包装，导致你有范围问题。你可以看到这里执行的是什么

<script type="text/javascript">//<![CDATA[ 
window.onload=function(){
function toggleCPRgt(){
                        var cpRgt = document.getElementById("cpRgt");
                        cpRgt.style.height = window.innerHeight - 60+"px";
                        if(cpRgt.style.right == "0px"){
                            cpRgt.style.right = "300px";
                        } else {
                            cpRgt.style.right = "0px";
                        }
                    }
}//]]>  

</script>

您可以使用jsfiddle选项更改执行类型，或者如果代码中存在相同的问题，您可以通过将函数应用于全局范围来修复它，如下所示。基本上要访问该功能，它需要能够看到该功能。

<script type="text/javascript">//<![CDATA[ 
window.onload=function(){
window.toggleCPRgt = function(){
   alert('here');
   //...
}//]]>  

</script>

Answer 2

DOM无法看到该函数，因为它超出了范围（在等待window.load事件的匿名函数中）。我在jsfiddle中更改了load参数以显示我的意思：

No wrap - in <head>

http://jsfiddle.net/r6fkq3jt/1/

Answer 3

在通话前定义你的功能。

<script type="text/javascript">
    function toggleCPRgt(){
    var cpRgt = document.getElementById("cpRgt");
    cpRgt.style.height = window.innerHeight - 60+"px";
    if(cpRgt.style.right == "0px"){
        cpRgt.style.right = "-300px";
    } else {
        cpRgt.style.right = "0px";
    }
}
</script>
<div id="cpBtnRgt" onclick="toggleCPRgt()">
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 4

you should try this
javascript
function toggleCPRgt(){
                    var cpRgt = document.getElementById("cpRgt");
                    cpRgt.style.height = window.innerHeight - 60+"px";
                    if(cpRgt.style.right == "0px"){
                        cpRgt.style.right = "300px";
                    } else {
                        cpRgt.style.right = "0px";
                    }
                }
Html
<div id="cpBtnRgt" onclick="toggleCPRgt()">
                <div></div>
                <div></div>
                <div></div>
            </div>

jsfiddle link

参考错误：未定义功能

4 个答案: