mercredi 26 octobre 2016

First function calls on html button onclick, but not any others

I've just begun learning javascript, and I'm running into an issue where only one of my 3 currently coded buttons will either recognize a click, or run the function associated when I click it. This first example of code works wonderfully;

The HTML

<div id="commonchecks">
    <h3>Common Checks:</h3>
    <p>Type of Check:</p>
    <select id="CheckType">
        <option value="Strength">Strength</option>
        <option value="Stamina">Stamina</option>
        <option value="Agility">Agility</option>
        <option value="Intelligence">Intelligence</option>
        <option value="Charisma">Charisma</option>
        <option value="Perception">Perception</option>
    </select>
    <p>Complexity:</p>
    <select id="Complexity">
        <option value="Simple">Simple</option>
        <option value="Complex">Complex</option>
    </select>   
    <p>Circumstantial Factors (+/-):</p>
    <input type="number" id="bxCircumstantialFactors" value="-2">
    <h3 class="details">Check Details:</h3>
    <p id="success" class="details">It was a XXXXXXX!</p>
    <p id="rolltotal" class="details">You rolled a(n) XX.</p>
    <p id="rollstandards" class="details">You needed a(n) XX or higher.</p>
    <p id="experience" class="details">Experience Payout: 00 exp!</p>
    <p id="duplicate">DUPLICATE!</p>
    <button onclick="CheckRoll()" class="button" id="RollCheckButton">Roll</button>
</div>

And the javascript

function CheckRoll() {

//Loading Variables Up From User Input
numStrength = Number(document.getElementById("bxStrength").value);
numStamina = Number(document.getElementById("bxStamina").value);
numAgility = Number(document.getElementById("bxAgility").value);
numIntelligence = Number(document.getElementById("bxIntelligence").value);
numCharisma = Number(document.getElementById("bxCharisma").value);
numPerception = Number(document.getElementById("bxPerception").value);
numCircumstantialFactors = Number(document.getElementById("bxCircumstantialFactors").value);

//Making the Roll
numRoll = Math.floor(Math.random() * 20 + 1);
if (document.getElementById("duplicate").style.visibility === "visible"){
    document.getElementById("duplicate").style.visibility = "hidden";
}

//Checking to see if the roll was a duplicate
if (numRoll === prevRoll) {
    document.getElementById("duplicate").style.visibility = "visible";
}

//Checking the complexity of the check
switch (document.getElementById("Complexity").value){
    case "Simple":
        numBaseAddition = 10;
        numStatModifier = 2;
        break;
    case "Complex":
        numBaseAddition = 0;
        numStatModifier = 1;
        break;
}

//Checking the stat associated and marking it as the calculated stat
switch (document.getElementById("CheckType").value) {
    case "Strength":
        numRelevantStatValue = numStrength;
        break;
    case "Stamina":
        numRelevantStatValue = numStamina;
        break;
    case "Agility":
        numRelevantStatValue = numAgility;
        break;
    case "Intelligence":
        numRelevantStatValue = numIntelligence;
        break;
    case "Charisma":
        numRelevantStatValue = numCharisma;
        break;
    case "Perception":
        numRelevantStatValue = numPerception;
        break;
}

//Determining how much value of a stat effects your chances of success
numStatAddition = numRelevantStatValue / numStatModifier;

//Determining your factor of success
numSuccessFactor = numBaseAddition + numStatAddition + numCircumstantialFactors;

//If success factor is a 20 or higher, set it to 19 since one can always roll a 1
if (numSuccessFactor >= 20){
    numSuccessFactor = 19;
}

//Calculating the number you need to beat
numFailureFactor = 20 - numSuccessFactor;

//If failure factor is a 20 or higher, set it to 19 since one can always roll a 20
if (numFailureFactor >= 20) {
    numFailureFactor = 19;
}

//Calculating amount of experience possible to be earned
numExperience = numFailureFactor * 5;

//Reporting on the successfulness or not
if (numRoll >= numFailureFactor + 1){
    document.getElementById("success").innerHTML = "It was a SUCCESS!";
}
if (numRoll === 20){
    document.getElementById("success").innerHTML = "It was a CRITICAL SUCCESS!";
}
if (numRoll < numFailureFactor + 1){
    document.getElementById("success").innerHTML = "It was a FAILURE!";
    numExperience = 0;
}
if (numRoll === 1){
    document.getElementById("success").innerHTML = "It was a CRITICAL FAILURE!";
    numExperience = 0;
}

//Reporting the dice roll
document.getElementById("rolltotal").innerHTML = "You rolled a(n) " + numRoll + ".";

//Reporting the standards
document.getElementById("rollstandards").innerHTML = "You needed a(n) " + (numFailureFactor + 1) + " or higher.";

//Reporting experience gain
document.getElementById("experience").innerHTML = "Experience Payout: " + numExperience + " exp!";

//Saving last roll
prevRoll = numRoll;

However, on a much simpler function, it won't work for whatever reason. I've tried putting the javascript into firefox's debugger, and it didn't reveal any syntax mistakes. Here's the section that won't work.

The HTML

<p class="blocksection">Block Type:</p>
    <select id="blocktype">
        <option value="Unarmed">Unarmed</option>
        <option value="Armed">Armed</option>
    </select>
    <p class="blocksection" id="blockreporter">Your Block total is a(n) XX!</p>
    <p class="blocksection" id="blockduplicate">DUPLICATE!</p>
    <button onclick="BlockRoll()" class="button" id="blockbutton">Block!</button>

And the javascript

function BlockRoll() {
numStamina = Number(document.getElementById("bxStamina").value);
if (document.getElementById("blocktype").value === "Unarmed") {
    document.getElementById("blockreporter").InnerHTML = "Your Block total is a(n) " + Math.floor(Math.random() * 6 + 1) + "!";
}
else {
    document.getElementById("blockreporter").InnerHTML = "Your Block total is a(n) " + (Math.floor(Math.random() * 6 + 1) + (numStamina/2)) + "!";
}

}

I'm not used to this language, but I know c# well enough and they appear relatively similar. Is there a really simple mistake that I'm making somewhere?

Thanks




Aucun commentaire:

Enregistrer un commentaire