Javascript-Funktion wird einfach nicht laufen

Question

Dieses Skript wird einfach nicht funktionieren und ich kann nicht herausfinden, warum. Es sollte ein "p" Element abhängig vom Ergebnis setzen, aber es wird einfach nicht funktionieren. Ich habe das folgende Skript eingefügt. Ich beginne gerade erst, JavaScript zu lernen, also ist es wahrscheinlich ein blöder Fehler.

var spearman = 12; 
 
var swordsman = 10; 
 
var berserker = 68; 
 
var archer = 16; 
 
var crossbowman = 13; 
 
var nordicArcher = 56; 
 
var armouredHorseman = 22; 
 
var lancerHorseman = 20; 
 
var axeRider = 82; 
 
var handCart = 500; 
 
var oxCart = 2500; 
 
var spearmanCap; 
 
var swordsmanCap; 
 
var berserkerCap; 
 
var archerCap; 
 
var crossbowmanCap; 
 
var nordicArcherCap; 
 
var armouredHorsemanCap; 
 
var lancerHorsemanCap; 
 
var axeRiderCap; 
 
var handCartCap; 
 
var oxCartCap; 
 
var numberOfCastles; 
 
var numberOfForts; 
 
var silverRequired; 
 
var troopsCanCarry; 
 

 
function enoughSilver() { 
 
    spearmanCap = spearman * document.getElementById("spearmanNum").value; 
 
    swordsmanCap = swordsman * document.getElementById("swordsmanNum").value; 
 
    berserkerCap = berserker * document.getElementById("berserkerNum").value; 
 
    archerCap = archer * document.getElementById("archerNum").value; 
 
    crossbowmanCap = crossbowman * document.getElementById("crossbowmanNum").value; 
 
    nordicArcherCap = nordicArcher * document.getElementById("nordicArcherNum").value; 
 
    armouredHorsemanCap = armouredHorseman * document.getElementById("armouredHorsemanNum").value; 
 
    lancerHorsemanCap = lancerHorseman * document.getElementById("lancerHorsemanNum").value; 
 
    axeRiderCap = axeRider * document.getElementById("axeRiderNum").value; 
 
    handCartCap = handCart * document.getElementById("handCartNum").value; 
 
    oxCartCap = oxCart * document.getElementById("oxCartNum").value; 
 
    
 
    troopsCanCarry = spearmanCap + swordsmanCap + berserkerCap + archerCap + crossbowmanCap + nordicArcherCap + armouredHorsemanCap + lancerHorsemanCap + axeRiderCap + handCartCap + oxCartCap; 
 
    
 
    numberOfCastles = document.getElementById("attackerCastlesNum"); 
 
    numberOfForts = document.getElementById("attackerFortNum"); 
 
     
 
    if (document.getElementById("landRefYes").checked) { 
 
     if (document.getElementById("yourcastle").checked) {  
 
      numberOfForts = numberOfForts * 5; 
 
      numberOfCastles = numberOfCastles + numberOfForts; 
 
      silverRequired = 1000 * numberOfCastles; 
 
      silverRequired = silverRequired/2; 
 
      if (troopsCanCarry == silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry exacly the right amount of silver. This is almost certainly a real attack"; 
 
      } 
 
      else if (troopsCanCarry > silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry more than enough silver to capture your castle. Keep your troops inside your castle and consider calling support!"; 
 
      } 
 
      else if (troopsCanCarry < silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops cant carry enough silver this isnt a real attack"; 
 
      } 
 
     } 
 
     else if (document.getElementById("yourfort").checked) { 
 
      numberOfForts = numberOfForts * 5; 
 
      numberOfCastles = numberOfCastles + numberOfForts; 
 
      numberOfCastles = numberOfCastles * 5; 
 
      silverRequired = 1000 * numberOfCastles; 
 
      if (troopsCanCarry == silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry exacly the right amount of silver. This is almost certainly a real attack"; 
 
      } 
 
      else if (troopsCanCarry > silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry more than enough silver to capture your castle. Keep your troops inside your castle and consider calling support!"; 
 
      } 
 
      else if (troopsCanCarry < silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops cant carry enough silver this isnt a real attack"; 
 
      } 
 
     } 
 
     else { 
 
      console.log("Error") 
 
     } 
 
     
 
     
 
    } 
 
    else if (document.getElementById("landRefNo").checked) { 
 
     if (document.getElementById("yourcastle").checked) {  
 
      numberOfForts = numberOfForts * 5; 
 
      numberOfCastles = numberOfCastles + numberOfForts; 
 
      silverRequired = 1000 * numberOfCastles; 
 
      if (troopsCanCarry == silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry exacly the right amount of silver. This is almost certainly a real attack"; 
 
      } 
 
      else if (troopsCanCarry > silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry more than enough silver to capture your castle. Keep your troops inside your castle and consider calling support!"; 
 
      } 
 
      else if (troopsCanCarry < silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops cant carry enough silver this isnt a real attack"; 
 
      } 
 
     } 
 
     else if (document.getElementById("yourfort").checked) { 
 
      numberOfForts = numberOfForts * 5; 
 
      numberOfCastles = numberOfCastles + numberOfForts; 
 
      numberOfCastles = numberOfCastles * 5; 
 
      silverRequired = 1000 * numberOfCastles; 
 
      if (troopsCanCarry == silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry exacly the right amount of silver. This is almost certainly a real attack"; 
 
      } 
 
      else if (troopsCanCarry > silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops can carry more than enough silver to capture your castle. Keep your troops inside your castle and consider calling support!"; 
 
      } 
 
      else if (troopsCanCarry < silverRequired) { 
 
       document.getElementById("answer").innerHTML = "The troops cant carry enough silver this isnt a real attack"; 
 
      } 
 
     } 
 
    else { 
 
     console.log("Error"); 
 
    } 
 
     
 
     
 
    } 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title>Could it be a sliver attack?</title> 
 
    <link rel="stylesheet" src="stylesheet.css"> 
 
    <script src="isItSilver.js"></script> 
 
</head> 
 
<body> 
 
    <h1>Could it be a sliver attack?</h1> 
 
    <p>You can use this tool to calculate wether the attacking troops can carry enough silver to capture your castle. <br>If they dont then you can safely remove your troops let them take your resources and leave.</p> 
 
    
 
    <fieldset> 
 
     <legend>Your castle under attack is a:</legend> 
 
     <p> 
 
      <input id="yourcastle" type="radio" name="underattack" checked="checked"><label for="yourcastle">Castle</label> 
 
      <input id="yourfort" type="radio" name="underattack"><label for="yourfort">Fortress</label> 
 
    
 
     </p> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend>Attacker Information</legend> 
 
     <p>(if multiple players are attacking use the lowest players information)</p> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        <input type="number" value="1" id="attackerCastlesNum"><label for="attackerCastlesNum">How many Castles does the attacker have?</label> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <input type="number" value="0" id="attackerFortNum"><label for="attackerFortNum">How many Fortresses does the attacker have?</label> 
 
       </td> 
 
     
 
      </tr> 
 
     </table> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend>Is land reform on?</legend> 
 
     <p> 
 
      <input id="landRefYes" type="radio" name="landRef"><label for="landRefYes">Yes, land reform is on</label> 
 
      <input id="landRefNo" type="radio" name="landRef" checked="checked"><label for="landRefNo">No, land reform is not on</label> 
 
      <br> 
 
      Land reform means Castles & Fortresses cost 50% silver 
 
     </p> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend>How many troops are attacking?</legend> 
 
     <p>Use the amount of troops that arrived before the first round. If any support has arrived add those troops to the troops that arrived before round one 
 
     </p> 
 
     <tabel> 
 
      <tr> 
 
       <td>Spearmen:</td> 
 
       <td> 
 
        <input type="number" id="spearmanNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Swordsman:</td> 
 
       <td> 
 
        <input type="number" id="swordsmanNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Berserker:</td> 
 
       <td> 
 
        <input type="number" id="berserkerNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Archer:</td> 
 
       <td> 
 
        <input type="number" id="archerNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Crossbowman:</td> 
 
       <td> 
 
        <input type="number" id="crossbowmanNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Nordic Archer:</td> 
 
       <td> 
 
        <input type="number" id="nordicArcherNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Armoured Horseman:</td> 
 
       <td> 
 
        <input type="number" id="armouredHorsemanNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Lancer Horseman:</td> 
 
       <td> 
 
        <input type="number" id="lancerHorsemanNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Axe Rider:</td> 
 
       <td> 
 
        <input type="number" id="axeRiderNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Hand Cart:</td> 
 
       <td> 
 
        <input type="number" id="handCartNum"> 
 
       </td> 
 
      </tr> 
 
      <br> 
 
      <tr> 
 
       <td>Ox Cart:</td> 
 
       <td> 
 
        <input type="number" id="oxCartNum"> 
 
       </td> 
 
      </tr> 
 
     </tabel> 
 
    </fieldset> 
 
    <button id="isItASilverAttack" onclick="enoughSilver()">Is It A Silver Attack?</button> 
 
    <p id="answer"></p> 
 
    <p>If the troops cant hold enough silver to capture your castle then you can move your troops out and let the attacker steal some of your resources. <span id="warning">Warning!</span> If reinforcments arrive then you must do this again </p> 
 
    
 
</body> 
 
</html>

Vielen Dank im Voraus

Answer 1

Ich glaube, Sie dort die Werte zu erhalten vergessen:

numberOfCastles = document.getElementById("attackerCastlesNum").value; 
numberOfForts = document.getElementById("attackerFortNum").value; 

Answer 2

Es gibt ein paar kleinere Syntaxfehler in Ihrem Code (obwohl diese sind nicht die Ursache Ihres Problems):

(1) Sie haben das HTML-Tag "Tabelle" als "Tabelle" falsch geschrieben; &

(2) Sie ein Semikolon am Ende einer Ihrer Leitungen weggelassen:

else { 
    console.log("Error") 
} 

Was Sie Problem -

Der Code:

numberOfCastles = document.getElementById("attackerCastlesNum"); 
numberOfForts = document.getElementById("attackerFortNum"); 

Gibt die Werte des Eingabeelements (der Eingabeelemente) nicht zurück. Stattdessen gibt es eine Instanz des DOM-Objekts zurück, das für das Element repräsentativ ist.

Sie sollten stattdessen verwenden -

numberOfCastles = document.getElementById("attackerCastlesNum").value; 
numberOfForts = document.getElementById("attackerFortNum").value; 

Zusätzlich haben Sie Konstruktionen wie:

if (troopsCanCarry == silverRequired) { ... } 
else if (troopsCanCarry > silverRequired) { ... } 
else if (troopsCanCarry < silverRequired) { ... } 

Sie sollten das dritte else-if-Bedingung mit einem anderen tauschen; Die ersten beiden Tests stellen sicher, dass die dritte Bedingung erfüllt ist - z.

if (troopsCanCarry == silverRequired) { ... } 
else if (troopsCanCarry > silverRequired) { ... } 
else { ... }