浏览器不识别变量答案

【问题标题】：browser not recognizing variables浏览器不识别变量
【发布时间】：2014-08-24 14:25:12
【问题描述】：

所以这就是交易.. 我试图使用 JavaScript 制作著名的奶牛和公牛游戏，当我在控制台上测试它时，一切都运行良好，没有我制作 $outputDiv 变量的代码，但正如我尝试使用 JQuery 在正文中附加 div 标签，浏览器将无法识别它们。看一下代码：

HTML：

<body id="body">
    <input type="text" name="inputBox" id="inputBox" />
    <button onclick="game();">press me</button>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script  type="text/javascript" src="js/init.js"></script>
</body>

Javascript：

function game() {
    var words = Array(["make", "lake", "take"], ["food", "rude"], ["tall", "ball"], ["cows", "bulls"]);` 


    var chosenWord = decideWord(words);

    var chosenWord = chosenWord.toLowerCase();
    var userInput = $('#inputBox').val();

    guesses(chosenWord, userInput);

}

function decideWord(words) {

    var i = Math.floor(Math.random() * words.length);
    var j = Math.floor(Math.random() * words[i].length);
    var word = words[i][j];
    var word = filter(word, words);

    return word;
}

function guesses(chosenWord, userInput) {
    var bull = 0;
    var cow = 0;
    var autoletters = chosenWord.split("");
    var inputletters = userInput.split("");

    for (var count = 0; count < userInput.length; count++) {
        if (chosenWord.search(inputletters[count]) != -1) {
            if (autoletters[count] == inputletters[count]) {
                bull++;
            } else {
                cow++;
            }
        }

    }
    // $('#body').append($outputDiv1);
    //  $('#od1').text("BULLS:"+bull+"COWS:"+cows);
    console.log("BULLS:" + bull + "COWS:" + cow);

}

function filter(Word, words) {
    var autoletters = Word.split("");

    if (autoletters[0] == autoletters[1] || autoletters[0] == autoletters[2] || autoletters[0] == autoletters[3] || autoletters[1] == autoletters[2] || autoletters[1] == autoletters[3] || autoletters[2] == autoletters[3]) {
        var Word = decideWord(words);
        return Word;
    } else {
        return Word;
    }

}

function makeDivs() {
    var $outputDiv1 = $('<div class="outputDiv" id ="od1" ></div>');
    var $outputDiv2 = $('<div class="outputDiv" id ="od2" ></div>');
    var $outputDiv3 = $('<div class="outputDiv" id ="od3" ></div>');
    var $outputDiv4 = $('<div class="outputDiv" id ="od4" ></div>');
    var $outputDiv5 = $('<div class="outputDiv" id ="od5" ></div>');
    var $outputDiv6 = $('<div class="outputDiv" id ="od6" ></div>');
    var $outputDiv7 = $('<div class="outputDiv" id ="od7" ></div>');
    var $outputDiv8 = $('<div class="outputDiv" id ="od8" ></div>');
    var $outputDiv9 = $('<div class="outputDiv" id ="od9" ></div>');
    var $outputDiv10 = $('<div class="outputDiv" id ="od10" ></div>');
    var outputDivTags = Array($outputDiv1, $outputDiv2, $outputDiv3, $outputDiv4, $outputDiv5, $outputDiv6, $outputDiv7, $outputDiv8, $outputDiv9, $outputDiv10);
    return outputDivTags;
}

控制台：

Uncaught SyntaxError: Unexpected token <     //on startup
Uncaught ReferenceError: game is not defined //on pressing the button

【问题讨论】：

谢谢你们成功了....
@mplungjan AFAIK，您不应该要求某人接受答案。但是你应该让他知道它是如何工作的，就像你一样:)
如果它有效，你可以accept the answer you found most useful

标签： javascript jquery html browser console

【解决方案1】：

好吧，首先，尝试在周围添加引号

var $outputDiv1 = $(<div class="outputDiv" id ="od1" ></div>);

所以，比如：

var $outputDiv1 = $('<div class="outputDiv" id ="od1" ></div>');

这应该会有所帮助。

这适用于所有这些行。

【讨论】：

【解决方案2】：

这只是syntax 的问题：您可以永远在 JavaScript 中编写 HTML 或任何其他语言，但字符串除外。字符串总是用引号括起来。

所以这些行

var $outputDiv1 = $(<div class="outputDiv" id ="od1" ></div>);
var $outputDiv2 = $(<div class="outputDiv" id ="od2" ></div>);
var $outputDiv3 = $(<div class="outputDiv" id ="od3" ></div>);
var $outputDiv4 = $(<div class="outputDiv" id ="od4" ></div>);
var $outputDiv5 = $(<div class="outputDiv" id ="od5" ></div>);
var $outputDiv6 = $(<div class="outputDiv" id ="od6" ></div>);
var $outputDiv7 = $(<div class="outputDiv" id ="od7" ></div>);
var $outputDiv8 = $(<div class="outputDiv" id ="od8" ></div>);
var $outputDiv9 = $(<div class="outputDiv" id ="od9" ></div>);
var $outputDiv10 = $(<div class="outputDiv" id ="od10" ></div>);

应该是这样的：

var $outputDiv1 = $('<div class="outputDiv" id ="od1" ></div>');
var $outputDiv2 = $('<div class="outputDiv" id ="od2" ></div>');
var $outputDiv3 = $('<div class="outputDiv" id ="od3" ></div>');
var $outputDiv4 = $('<div class="outputDiv" id ="od4" ></div>');
var $outputDiv5 = $('<div class="outputDiv" id ="od5" ></div>');
var $outputDiv6 = $('<div class="outputDiv" id ="od6" ></div>');
var $outputDiv7 = $('<div class="outputDiv" id ="od7" ></div>');
var $outputDiv8 = $('<div class="outputDiv" id ="od8" ></div>');
var $outputDiv9 = $('<div class="outputDiv" id ="od9" ></div>');
var $outputDiv10 = $('<div class="outputDiv" id ="od10" ></div>');

注意'（单引号）

【讨论】：

【解决方案3】：

这个怎么样（虽然你实际上并没有在发布的代码中使用该函数）

function makeDivs() {
  var outputDivTags=[];
  for (var i=1;i<=10;i++) {
    outputDivTags.push($('<div/>',{"class":"outputDiv", "id":"od"+i}));
  }
  return outputDivTags;
}

【讨论】：

哥们你还有报价问题xD