Функция Javascript просто не запускается

Question

Этот скрипт просто не работает, и я не могу понять, почему. Предполагается, что он устанавливает элемент «p» в зависимости от результата, но он просто не работает. Ive включил сценарий ниже. Я только начинаю изучать JavaScript, так что, вероятно, это глупая ошибка.

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>

Заранее спасибо

Answer 1

Я думаю, что вы забыли, чтобы получить значения там:

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

Answer 2

Есть несколько незначительных синтаксических ошибок в коде (хотя эти не являются причиной вашей проблемы):

(1) Вы ошиблись в HTML-теге «table» как «tabel»; &

(2) Вы опустили с запятой в конце одной из линий:

else { 
    console.log("Error") 
} 

Что касается вас проблемы -

Код:

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

Не будет возвращать значения входного элемента (ов) - вместо этого будет возвращен экземпляр объекта DOM, представляющего элемент.

Вы должны использовать вместо этого -

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

Кроме того у вас есть конструкции, такие как:

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

Вы должны рассмотреть замены 3-й еще: если условие с другой; первые два теста гарантируют выполнение третьего условия - например,

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