Can't access javascript code from html in sublime text

Question

For an online course, I have to make a web page that makes use of jQuery and JavaScript. I am adding JavaScript code so that when I click a button on the webpage with the text 'START', it is supposed to disappear, but my web page just is not doing it.

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 code:

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

No need to worry about the css, because it's just the JavaScript and html to worry about.

If you have any advice, please reply to this question.

Thank you

Firstly, wrap your jQuery code in a document.ready event handler ($(function() { /* your code here... */ });). Secondly, ##startButton isn't a selector - use #startButton instead. Lastly, double check the console, as the browser may be blocking you from loading JS files from the local file system — Rory McCrossan
– Rory McCrossan, Commented Aug 30, 2017 at 18:57

SuperStormer · Accepted Answer · 2017-08-30 18:56:32Z

1

##startButton doesn't select any elements, so the JS code should be

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

answered Aug 30, 2017 at 18:56

SuperStormer

5,5185 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't access javascript code from html in sublime text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related