Question

当我分离文件（HTML和JS）并将JS文件链接到HTML（如预期的那样）时，一切正常。但是，当我在HTML代码中的<script>标记中包含JS代码时，它无法按预期工作。输入数组中包含的任何项目后，没有任何反应，即使它应该检查有问题的条件。

HTML代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Guessing Game</title>
    <script src="Week 2 Part 1.js" type="text/javascript"></script>
</head>
<body>
    <p onload="colorGame()"></p>
</body>
</html>

JS代码：

let myColors = ["red", "purple", "blue", 
"orange", "violet", "green", 
"amber", "deep ruby", "lemon chiffon", 
"old lace", "lime", "yellow", "chartreuse", 
"deep taupe", "wheat", "deep pink", 
"amethyst", "beige", "turquoise"];

let yourColor = prompt("I am thinking of one of these colors:\n\n" +    myColors.sort() + "\n\nWhat color am I thinking of?");

function yourGuessedColor() {
    while(myColors.indexOf(yourColor) <= -1) {
        alert("Sorry, I don't recognize your color.\n\nPlease try again.");
        yourColor = prompt("I am thinking of one of these colors:\n\n" +  myColors.sort() + "\n\nWhat color am I thinking of?");
    }
    return yourColor;
}

let guessedColor = yourGuessedColor();
let myFavColor = myColors[Math.floor(Math.random() * myColors.length)];
let guesses = 1;
function colorGame() {
    while (guessedColor != myFavColor) {
        if (guessedColor > myFavColor) {
            alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically higher than mine.\n\nPlease try again.");
            guessedColor = prompt("I am thinking of one of these colors:\n\n" + myColors.sort() + "\n\nWhat color am I thinking of?");
        }
        else {
            alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically lower than mine.\n\nPlease try again.");
            guessedColor = prompt("I am thinking of one of these colors:\n\n" + myColors.sort() + "\n\nWhat color am I thinking of?");
        }
        guesses ++;
    }
    return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.")
}

Answer 1

尝试

<body onload="colorGame()">

而不是

<p onload="colorGame()">

Answer 2

评论作为答案：您确定删除了src属性吗？

Answer 3

一种解决方案是在第2周Part 1.js文件的最后一行调用 colorGame（） 函数。

但是通过这样做，你只能在猜到颜色时离开你的应用程序。

您的第2周Part 1.js文件应如下所示：

let myColors = ["red", "purple", "blue", 
"orange", "violet", "green", 
"amber", "deep ruby", "lemon chiffon", 
"old lace", "lime", "yellow", "chartreuse", 
"deep taupe", "wheat", "deep pink", 
"amethyst", "beige", "turquoise"];

let yourColor = prompt("I am thinking of one of these colors:\n\n" +    myColors.sort() + "\n\nWhat color am I thinking of?");

function yourGuessedColor() {
    while(myColors.indexOf(yourColor) <= -1) {
        alert("Sorry, I don't recognize your color.\n\nPlease try again.");
        yourColor = prompt("I am thinking of one of these colors:\n\n" +  myColors.sort() + "\n\nWhat color am I thinking of?");
    }
    return yourColor;
}

let guessedColor = yourGuessedColor();
let myFavColor = myColors[Math.floor(Math.random() * myColors.length)];
let guesses = 1;
function colorGame() {
    while (guessedColor != myFavColor) {
        if (guessedColor > myFavColor) {
            alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically higher than mine.\n\nPlease try again.");
            guessedColor = prompt("I am thinking of one of these colors:\n\n" + myColors.sort() + "\n\nWhat color am I thinking of?");
        }
        else {
            alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically lower than mine.\n\nPlease try again.");
            guessedColor = prompt("I am thinking of one of these colors:\n\n" + myColors.sort() + "\n\nWhat color am I thinking of?");
        }
        guesses ++;
    }
    return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.")
}
colorGame();

Answer 4

您无法在 p 标记上使用 onload 事件。

此事件只能与以下标记一起使用：正文，框架，框架集， iframe ， img ，输入类型=＆＃34;图片＆＃34; ，链接，脚本和样式

Answer 5

只需在body标签中的onload事件中调用该函数，并删除外部脚本标记，包括脚本内联。如下

<body onload="colorGame()">

    <script type="text/javascript">
        var myColors = ["red", "purple", "blue", 
        "orange", "violet", "green", 
        "amber", "deep ruby", "lemon chiffon", 
        "old lace", "lime", "yellow", "chartreuse", 
        "deep taupe", "wheat", "deep pink", 
        "amethyst", "beige", "turquoise"];
         ...

HTML中包含的JavaScript失败

5 个答案: