Question

所以这是交易..我正在尝试使用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

Answer 1

这只是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>');

请注意'（单引号）

Answer 2

首先，请尝试在

周围添加引号

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

所以，像：

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

这应该有所帮助。

这适用于所有这些行。

Answer 3

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

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

浏览器无法识别变量

3 个答案: