Javascript gilt nicht für HTML

Aus irgendeinem Grund laufen meine Javascript-Skriptdateien überhaupt nicht im Webbrowser. Als ich die Dateien auf copepen.io geschrieben habe, funktionierten sie richtig, aber aus irgendeinem Grund funktionieren sie nicht mehr. Ich überprüfte meine Dateistruktur und überprüfte meinen Code, so dass ich keinen Grund sehe, warum es nicht funktionieren würde. Gibt es möglicherweise etwas anderes, das ich vergessen habe?Javascript gilt nicht für HTML

Hier ist ein Link auf die codepen Arbeits: http://codepen.io/Emersonbrandon0/full/vyOQaq/

<html> 
    <head> 
    <title>Tip Calculator</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="calculationScript.js"></script> 
    </head> 

    <body> 
    <div class="container-fluid"> 
     <div class="well"> 
     <div class="mainContent text-center"> 
      <form name="tipForm"> 
      How much was your meal?<br><input type="textContent" id="price"> 
      <br><br> How would you rate your enjoyment of the service? 
      <br> 
      <select name="service" id="quality"> 
       <option>Terrible, NEVER coming back</option> 
       <option>Bearable</option> 
       <option>It was Okay</option> 
       <option>Good</option> 
       <option>Amazing</option> 
       </select> 
      <br><br> How many people are in your party?<br><input type="text-content" id="partySize"><br> 
      <div class="error"></div> 
      <div class="tipArea"></div> 
      <button type="button" id="submitButton">Calculate Your Tip</button> 
      </form> 
     </div> 
     </div> 
    </div> 
    </body> 

</html>

und die js

var submitButton = document.querySelector("#submitButton"); 
submitButton.addEventListener("click", calculateTip, false); 

function calculateTip() { 
    tip = 0; 
    var price = document.querySelector("#price").value; 
    var partySize = document.querySelector("#partySize").value; 
    var error = document.querySelector(".error"); 
    price = parseInt(price); 
    partySize = parseInt(partySize); 
    if (price !== price || partySize !== partySize) { 
    error.textContent = "You must enter a number for the cost and for your party size!"; 
    error.classList.add("errorStyle"); 
    tipArea.classList.add("hide"); 
    tipArea.textContent = ""; 
    return "You entered invalid information!"; 
    } 
    tip = price; 
    var quality = document.querySelector("#quality").value; 
    switch (quality) { 
    case "Terrible, NEVER coming back": 
     tipMultiplier = 0; 
     break; 
    case "Bearable": 
     tipMultiplier = 0.05; 
     break; 
    case "It was Okay": 
     tipMultiplier = 0.15; 
     break; 
    case "Good": 
     tipMultiplier = 0.20; 
     break; 
    case "Amazing": 
     tipMultiplier = 0.25; 
     break; 
    default: 
     tipMultiplier = 0.15; 
    } 
    tip = (tip * tipMultiplier)/partySize; 
    var tipArea = document.querySelector(".tipArea"); 
    tipArea.classList.add("show"); 
    tipArea.textContent = "You should tip $" + tip; 
}

Quelle

2017-03-14 Brandon Emerson

Sie haben vergessen zu [überprüfen Sie die Browserkonsole für Fehler] (http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript- Konsolen-in-verschiedenen-Browsern). – JJJ

Mögliches Duplikat von [Warum findet jQuery oder eine DOM-Methode wie getElementById das Element nicht?] (Http://stackoverflow.com/questions/14028959/why-does-jquery-or-doma-meth-such-) as-geelementbybid-not-find-the-element) – JJJ

Verschieben Sie das Skript vor dem Schließen des Tags . –

Ihre Skripte sollten kurz vor dem Schließen Body-Tag-Datei sein. Versuchen Sie, Ihre HTML-Datei zu aktualisieren:

<html> 
    <head> 
    <title>Tip Calculator</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 

    <body> 
    <div class="container-fluid"> 
     <div class="well"> 
     <div class="mainContent text-center"> 
      <form name="tipForm"> 
      How much was your meal?<br><input type="textContent" id="price"> 
      <br><br> How would you rate your enjoyment of the service? 
      <br> 
      <select name="service" id="quality"> 
       <option>Terrible, NEVER coming back</option> 
       <option>Bearable</option> 
       <option>It was Okay</option> 
       <option>Good</option> 
       <option>Amazing</option> 
       </select> 
      <br><br> How many people are in your party?<br><input type="text-content" id="partySize"><br> 
      <div class="error"></div> 
      <div class="tipArea"></div> 
      <button type="button" id="submitButton">Calculate Your Tip</button> 
      </form> 
     </div> 
     </div> 
    </div> 

    <script src="calculationScript.js"></script> 
    </body> 

</html>

Quelle

2017-03-14 14:36:43

Diese Antwort hat funktioniert, danke –

Javascript gilt nicht für HTML

Antwort

Verwandte Themen