Zugriff auf JavaScript-Code von HTML in erhabenen Text

Für einen Online-Kurs muss ich eine Webseite erstellen, die jQuery und JavaScript verwendet. Ich füge JavaScript-Code hinzu, damit ich beim Klicken auf eine Schaltfläche auf der Webseite mit dem Text "START" verschwinden soll, aber meine Webseite tut es einfach nicht.Zugriff auf JavaScript-Code von HTML in erhabenen Text

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(); 
});

Keine Notwendigkeit, über die CSS zu sorgen, denn es ist nur die JavaScript und HTML zu kümmern Über.

Wenn Sie einen Rat haben, antworten Sie bitte auf diese Frage.

Danke

Quelle

2017-08-30 Brandon Marks

Erstens wickeln Sie Ihre jQuery-Code in einem document.ready Event-Handler ('$ (Funktion sein() {/ * Ihr Code hier ... * /}); '). Zweitens ist '## startButton' kein Selektor - verwenden Sie stattdessen' # startButton'. Überprüfen Sie schließlich die Konsole, da der Browser Sie möglicherweise daran hindert, JS-Dateien aus dem lokalen Dateisystem zu laden. –

Es ist in Ordnung, ich habe es herausgefunden, danke –

##startButton keine Elemente auswählt, so sollte der JS-Code

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

Quelle

2017-08-30 18:56:32 SuperStormer

Zugriff auf JavaScript-Code von HTML in erhabenen Text

Antwort

Verwandte Themen