Refference Error: function is not defined [duplicate]

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 <body> instead of onload in the left side options...That would remove the error.. — Rakesh_Kumar
– Rakesh_Kumar, Commented Feb 13, 2015 at 6:54

David Parlevliet · Accepted Answer · 2015-02-13 06:58:28Z

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 · Accepted Answer · 2015-02-13 07:08:13Z

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, 2015 at 7:08

answered Feb 13, 2015 at 6:53

Bitwise Creative

4,0805 gold badges31 silver badges35 bronze badges

2 Comments

Felix Kling Over a year ago

"The DOM wasn't ready for your function." What does that mean?

Bitwise Creative Over a year ago

It means I got schooled by @David Parlevliet

John V · Accepted Answer · 2015-02-13 06:56:16Z

-1

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>

answered Feb 13, 2015 at 6:56

John V

8546 silver badges12 bronze badges

Comments

Sharma Vikram · Accepted Answer · 2015-02-13 06:57:39Z

-1

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

answered Feb 13, 2015 at 6:57

Sharma Vikram

2,4846 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

Refference Error: function is not defined [duplicate]

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Related