函数未在javascript中定义。为什么？

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

我从html调用javascript函数。但它保留了返回错误并且说jsfiddle中没有定义函数。

here is html code

这是HTML代码

<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

这是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?

为什么以及如何解决它?

2 个解决方案

#1

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

因为你选择了onDomReady,你的脚本被$(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

这使得函数resizeImg本地传递给传递给$()的匿名函数,因此它对全局范围不可见。单击图像时,将在全局范围内搜索该方法,在该范围内,该方法不可见,这是导致错误的原因

#2

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

你没有在新的高度和宽度中指定“px”,而在jsfiddle中你必须将它包装在head部分中

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

工作jsfiddle演示

Hope this helps Thank you

希望这有帮助谢谢

#1