第一个函数调用html按钮onclick，但没有任何其他

Question

我刚刚开始学习javascript，我遇到了一个问题，我目前编码的3个按钮中只有一个会识别点击，或者当我点击它时运行相关的函数。第一个代码示例工作得非常好;

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>

和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;

然而，在一个简单得多的函数中，由于某种原因，它将不起作用。我试着把javascript放到firefox的调试器中，没有发现任何语法错误。这是不能工作的部分。

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>

和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)) + "!";
}

}

我不习惯这种语言，但我很了解c#，它们看起来比较相似。我是不是犯了一个很简单的错误?

谢谢

Answer 1

您在第二个示例中调用element.InnerHTML，这是不正确的，因为正确的值是innerHTML(注意小写i)

如果你点击F12(在大多数浏览器中)，开发者控制台将出现并显示这些常见错误。