function is not defined in javascript. why?

Question

I am calling javascript function from html. But it keeps return error and saying function is not defined in jsfiddle.

here is html code

<div id="Container">
    <img alt="Click to zoom" class="image" onclick="resizeImg(this)" 
src="http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg" />
</div>

here is javascript

function resizeImg (img) {
        var resize = 150; // resize amount in percentage
        var origH  = 61;  // original image height
        var origW  = 250; // original image width
        var mouseX = event.x;
        var mouseY = event.y;
        var newH   = origH * (resize / 100);
        var newW   = origW * (resize / 100);

        // Set the new width and height
        img.style.height = newH;
        img.style.width  = newW;

        var c = img.parentNode;

        // Work out the new center
        c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
        c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
    }

Why and how to solve it?

Your fiddle is set to execute the JavaScript onDomready, so your function isn't declared globally — Ian
– Ian, Commented Aug 14, 2013 at 18:10
JSFiddle is wrapping your function in a DOM ready handler, so it's out of scope. Change your settings, see jsfiddle.net/95wqh/1 — bfavaretto
– bfavaretto, Commented Aug 14, 2013 at 18:10

Arun P Johny · Accepted Answer · 2013-08-14 18:11:07Z

you need to select no-wrap in body/head in the second dropdown in left hand panel.

since you have selected onDomReady, your script is surrounded by $(function(){...}) ex

<script type="text/javascript">//<![CDATA[ 
$(function(){
function resizeImg (img) {
    var resize = 150; // resize amount in percentage
    var origH  = 61;  // original image height
    var origW  = 250; // original image width
    var mouseX = event.x;
    var mouseY = event.y;
    var newH   = origH * (resize / 100);
    var newW   = origW * (resize / 100);

    // Set the new width and height
    img.style.height = newH;
    img.style.width  = newW;

    var c = img.parentNode;

    // Work out the new center
    c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
    c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
}

});//]]>  

</script>

This makes the function resizeImg local to the anonymous function passed to $(), so it will not be visible to the global scope. when the image is clicked the method will be searched in the global scope where it is not visible that is the reason for the error

SarathSprakash · Accepted Answer · 2013-08-14 18:20:16Z

you didn't specify "px" in the new height and width and in jsfiddle you have to wrap it in head section

function resizeImg (img) {
    var resize = 150; // resize amount in percentage
    var origH  = 61;  // original image height
    var origW  = 250; // original image width
    var mouseX = event.x;
    var mouseY = event.y;
    var newH   = origH * (resize / 100);
    var newW   = origW * (resize / 100);

    // Set the new width and height
    img.style.height = newH+"px";   // changes made
    img.style.width  = newW+"px";

    var c = img.parentNode;

    // Work out the new center
    c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
    c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
}

Working jsfiddle Demo

Hope this helps Thank you

Collectives™ on Stack Overflow

function is not defined in javascript. why?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related