Refference Error: function is not defined

Question

I got a simple piece of javascript that should reveal a div from the right when the onclick is pressed!

However on firebug I am getting a function not defined error! I have the same function on the left and that is working fine. Here is my code..

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

I have also set up a JSFiddle here... http://jsfiddle.net/r6fkq3jt/

Just set jsfiddle to `No wrap in ` instead of `onload` in the left side options...That would remove the error.. — Rakesh_Kumar, Feb 13 '15 at 06:54

score 3 · Accepted Answer · answered Feb 13 '15 at 06:58

The issue with your jsfiddle was the fact that your javascript function was wrapped by an anonymous function, causing you to have scope issues. You can see what was acutaly being executed here

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

You can either change the type of execution using the jsfiddle options, or if the same issue applies in your code, you can fix it by applying the function to the global scope like shown below. Basically to access the function, it needs to be able to see the function.

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

</script>

Bitwise Creative · Answer 2 · 2015-02-13T07:08:13.697

2

The DOM couldn't see the function because it was out of scope (in an anonymous function waiting for the window.load event). I changed the load parameter in jsfiddle to show you what I mean:

No wrap - in <head>

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

edited Feb 13 '15 at 07:08

answered Feb 13 '15 at 06:53

Bitwise Creative

4,035
5
27
35

1

*"The DOM wasn't ready for your function."* What does that mean? – Felix Kling Feb 13 '15 at 06:57
It means I got schooled by @David Parlevliet – Bitwise Creative Feb 13 '15 at 07:06

score -1 · Answer 3 · answered Feb 13 '15 at 06:56

define your function before call.

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

score -1 · Answer 4 · answered Feb 13 '15 at 06:57

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

Refference Error: function is not defined

4 Answers4