第一个函数调用html按钮onclick,但不是任何其他函数

时间:2016-10-27 04:37:34

标签: javascript html web

我刚刚开始学习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#足够好,看起来相似。我在某个地方犯了一个非常简单的错误吗?

由于

1 个答案:

答案 0 :(得分:2)

您在第二个示例中调用的var output = ["I want you to do something", "else instead."] 不正确,因为正确的值为var output = ["I want you to do", "something else", "instead."] (请注意小写的i。)

如果您点击element.InnerHTML(在大多数浏览器中),开发者控制台会出现并向您显示常见错误。