Question

对于在线课程，我必须创建一个使用jQuery和JavaScript的网页。我正在添加JavaScript代码，以便当我点击网页上带有“START”文本的按钮时，它应该会消失，但我的网页却没有这样做。

HTML code：

<head>
    <link rel = 'stylesheet' type = 'text/css' href = 'memory_game.css'>
    <script src="C:\Users\Fabian\Documents\sublime\jquery-3.2.1.min"></script>
    <script type="text/javascript" src="memory_game.js"></script>
    <title>Concentration - Memory Game </title>

    <div class = headings>
        <h1>CONCENTRATION </h1>
        <h2>The shnazzy, feature-packed memory game! </h2>
    </div>

</head>

<body>

    <div class = 'rules'>
        <p>RULES: </p>
            <ol> 
                <li>The game consists of 16 cards on a 4 by 4 grid </li>
                <li>Initially, the cards will be faced up for a short period of time and, and will consist of 8 pairs, each with both cards having the same symbol </li>
                <li>Once these cards are faced back down, your objective is to try and remember which cards contained matching symbols</li>
                <li>Once you click one card, guess which one is paired with the card you just clicked, and if you get it correct, your score goes up by 1 </li>
                <li>If you guess a pair incorrectly, the two cards you click will be faced back down </li>
                <li>When you find all matching pairs, you win, and you get the option to play again </li>
                <li>Your performance rating at the end of the game will be a star rating of 1 to 3, which will be based on how many incorrect guesses you make, and how long it takes for you to win the game, for a timer will be shown during the game </li>
            </ol>
    </div>

    <div class = 'grid'> 
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>
        <img src = 'https://balancebest.co.uk/33349-home_default/flutter-fetti-orange-block-2.jpg' alt = 'block'>

    </div>

    <div id = 'startButton'>
        <button>START</button>
    </div>

    <div id = 'reStartButton'>
        <button>RESTART</button>
    </div>

    <div id = 'score'>
        <p>SCORE: </p>
    </div>

</body>

JavaScript代码：

$('#startButton').click(function() {
    $('##startButton').hide();
});

无需担心CSS，因为它只是担心JavaScript和HTML。

如果您有任何建议，请回答此问题。

谢谢

Answer 1

##startButton没有选择任何元素，因此JS代码应为

$('#startButton').click(function() {
    $('#startButton').hide();
});

无法在sublime文本中从html访问javascript代码

1 个答案: