JS函数未定义答案

【问题标题】：JS function is not definedJS函数未定义
【发布时间】：2014-07-13 11:41:56
【问题描述】：

当点击“GenQR”按钮时，没有任何反应。

控制台

Uncaught ReferenceError: JSQR is not defined(index):26
myqr (index):26
(anonymous function) (index):51
jQuery.event.dispatch jquery-2.1.0.js:4371
elemData.handle

HTML

<button type="button" id="qr"/>GenQR</button>

qr.js

document.addEventListener('DomContentLoaded', function () {
    document.getElementById('qr').addEventListener('click', myqr);
});
(function myqr() {
    var qr = new JSQR();
    var code = new qr.Code();

    code.encodeMode = code.ENCODE_MODE.BYTE;
    code.version = code.DEFAULT;

    code.errorCorrection = code.ERROR_CORRECTION.H;

    var input = new qr.Input();
    input.dataType = input.DATA_TYPE.TEXT;

    input.data = 'test';

    var matrix = new qr.Matrix(input, code);


    matrix.scale = 10;
    matrix.margin = 10;
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', matrix.pixelWidth);
    canvas.setAttribute('height', matrix.pixelWidth);
    canvas.getContext('2d').fillStyle = 'rgb(0,0,0)';
    matrix.draw(canvas, 0, 0);

    document.body.appendChild(canvas);
})();

【问题讨论】：

你的min.js文件是什么？
JSQR is not defined 是一个足够明显的错误。是什么让您认为应该定义它？

标签： javascript html qr-code

【解决方案1】：

在您的名为 myqr() 的 JS 函数中，您有以下语句：

var qr = new JSQR();

但是，您的代码中没有定义 JSQR，因此浏览器不知道您在说什么并引发错误。

此外，单击按钮不会发生任何事情，因为当发生上述错误时，函数会退出...

【讨论】：

【解决方案2】：

您提供的代码和小提琴存在几个问题。第一个主要问题是 jsqr 没有像其他人提到的那样定义。您需要设置对 jsqr 库的外部引用 (http://code.jsqr.de/jsqr-0.2-min.js) 否则它不知道该库是什么。

小提琴： http://jsfiddle.net/mcfarljw/n9PbR/

第二个问题是您调用了一个自调用函数，该函数在脚本加载时触发，因此在单击事件发生时不会触发。

(function myqr() {
    //your code here
})();

你应该把它变成这样的函数：

function myqr() {
    //your code here
}

最后，您已将单击事件侦听器包装在 DomContentLoaded 侦听器中。使用 jsfiddle 时不需要这样做，因为脚本已经设置为在加载时运行。因此，您可以在小提琴示例中删除它，但您需要在其他本地代码中添加类似的内容。

【讨论】：