功能外部的变量是未定义的

Question

http://jsfiddle.net/luketheterrible/bmedv/

我正在编写一项测验，其中用户必须单击左侧的DIV或右侧的DIV，其中用户必须从两个选项中进行选择。

$('#answers').on('click', 'div', function(event) {
    event.preventDefault(); 
    var input = "";
    function userAnswer(event) {
        var target = $(event.target);
        if(target.is('#answerLeft')) {
            alert("you clicked left");
            input = "left";
            return input;
        } else {
            alert("you clicked right");
            input = "right";
            return input;
        }
        return input;
    }
    alert(input);
    });
});

出于某种原因，变量"输入"正在清除未定义的。尽管进行了大量搜索，但我似乎找不到有关将输入定义为用户单击的最佳方法的答案。

Answer 1

您定义您的函数userAnswer，但您永远不会称呼它。

userAnswer(event); // execute the function
alert(input);

http://jsfiddle.net/mblase75/bmedv/1/

---

更好的是，完全删除功能：

$('#answers').on('click', 'div', function (event) {
    event.preventDefault();
    var input = "";
    //which answer did the user pick
    var target = $(event.target);
    if (target.is('#answerLeft')) {
        input = "left";
    } else {
        input = "right";
    }
    alert(input);
});

http://jsfiddle.net/mblase75/prpmj/

Answer 2

您从不调用您的方法...

$(document).ready(function(){
    $('#answers').on('click', 'div', function(event) {
        event.preventDefault(); 
        var input = userAnswer(event); // Need to call this method...
    //which answer did the user pick
        function userAnswer(event) {
            var target = $(event.target);
            if(target.is('#answerLeft')) {
                alert("you clicked left");
                input = "left";
                return input;
            } else {
                alert("you clicked right");
                input = "right";
                return input;
            }
            return input;
        }
        alert(input);
    });
});

Answer 3

无需定义函数http://jsfiddle.net/bmedv/5/

$(document).ready(function(){
    $('#answers').on('click', 'div', function(event) {
        event.preventDefault(); 
        var input = "";
    //which answer did the user pick
        //function userAnswer(event) {
            var target = $(event.target);
            if(target.is('#answerLeft')) {
                alert("you clicked left");
                input = "left";
                //return input;
            } else {
                alert("you clicked right");
                input = "right";
                //return input;
            }
            //return input;
        //}
        //alert(input);
    });
});

Answer 4

您也可以使用数据属性直接获取答案文本。

html

<div id="answerLeft" data-answer="left"></div>
<div id="answerRight" data-answer="right"></div>

jQuery

$(document).ready(function(){
    $('#answers').on('click', 'div', function(event) {
        event.preventDefault(); 
        var input = $(this).data("answer");
        alert(input);
    });
});

我更新了您的jsfiddle以显示：

Answer 5

给出了答案，您永远不会调用该函数，因此输入永远不会给出一个值。但是，将来调试的提示：当变量最终没有这样的价值时，通常意味着它从未给出过，它被书写了，或者您有范围问题。

多次它的范围，查看变量的定义位置以及您设置/调用的位置。

如果您确定它不是范围问题，那么它很可能是另一个。因此，每几行都会弹出消息并打印出变量。您将能够查看它是否有一个值，并且该价值丢失了。

请确保您也将消息放在所有功能中，这样，如果最后您看不到一个或多个功能中的任何消息，您知道从未打电话的这些功能，这就是为什么消息没有显示的原因。<<<<<<

在这种情况下，放置在您的功能中的按摩不会显示出来，很快就会很快调用该功能。

hth祝你好运！