Javascript function just won't run

Question

This script just won't work and I cant find out why. It's supposed to set a "p" element depending on the outcome but it just won't work. I've included the script below. I'm only just starting to learn JavaScript so it's probably a stupid error.

 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> 

Thanks in advance

Answer 1

I think you forgot to get the values there :

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

Answer 2

There are a few minor syntax errors in your code (though these are not the cause of your issue):

(1) You have misspelled the HTML tag "table" as "tabel"; &

(2) You have omitted a semi-colon at the end of one of your lines:

else {
    console.log("Error")
}

As for you problem --

The code:

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

Will not return the values of the input element(s) -- it will instead returning an instance of the DOM object representative of the element.

You should instead use --

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

Additionally you have constructions such as:

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

You should consider swapping the 3rd else-if condition with an else; the first two tests ensure that the third condition is met -- eg

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