javascript - Javascript 和 Html 自定义计算无法正确打印结果

Question

我对 javascript 非常陌生，并且仅从业余爱好编码中了解基本的 HTML 内容，最近一个朋友找我尝试用 javascript 编写的东西……起初听起来很容易，但现在我陷入了困境我意识到这比我预期的要复杂得多。谁能让我深入了解我的代码并告诉我我可能做错了什么等？据我所知，它是正确的吗？然而它没有打印结果，甚至没有任何错误，只是没有。它应该有 4 种不同的函数用于不同的计算，但目前，只有第一个我试图产生任何东西，甚至让我知道出了什么问题，但似乎我有点太绿了想办法？

编辑：由于修复这些错误的有用评论现在导致它打印结果，但是，似乎某些数学可能会被破坏，但我担心复选框实际工作？这看起来对吗？

<div id="calculator">
<span id="calcActive" class="wildPokemon"> <b>Select Encounter Type:</b><br> <select class="forminput" id="calc_select" onChange="switchCalc()" style="margin-bottom: 10px;text-align:center;">
  
          <option selected="selected" value="wildPokemon">Wild Pokemon</option>
          <option value="trainerBattle">Trainer/Social</option>
          <option value="officialWin">Official Battle Win</option>
          <option value="officialLoss">Official Battle Loss</option>
        </select>
<input type="checkbox" id="xpShare" name="xpShare" value="xpShare">
<label for="xpShare">XP Share</label>
<input type="checkbox" id="luckyEgg" name="luckyEgg" value="luckyEgg">
<label for="luckyEgg">Lucky Egg</label><br>
        </span><br>
 <div id="calc-desc">
 <p>Enter your current level, Current XP, and new XP to add in. The new level and new remaining XP will be displayed.</p><p><b>Your Level:</b> <input class="forminput" type="number" min="1" max="100" onKeyUp="inputFullLevel(this, this.value)" id="currentLevel"><br> <b>Current XP:</b> <input class="forminput" type="number" min="0" max="17820" onKeyUp="inputSpareXp(this, this.value)" id="currentXp"><br><b>New XP:</b> <input class="forminput" type="number" min="1" max="17820" onKeyUp="inputXp(this, this.value)" id="newXp"></p><button class="forminput" type="button" onclick="runWildPokemon()">Calculate</button>

  </div><p>
  
  </p>
 
 <div id="calc-results">

 </div>
</div>

<script>
var xpToLevel = [180, 360, 540, 720, 900, 1080, 1260, 1440, 1620, 1800, 1980, 2160, 2340, 2520, 2700, 2880, 3060, 3240, 3420, 3600, 3780, 3960, 4140, 4320, 4500, 4680, 4860, 5040, 5220, 5400, 5580, 5760, 5940, 6120, 6300, 6480, 6660, 6840, 7020, 7200, 7380, 7560, 7740, 7920, 8100, 8280, 8460, 8820, 9000, 9180, 9360, 9540, 9720, 9900, 10080, 10260, 10440, 10620, 10800, 10980, 11160, 11340, 11520, 11700, 11880, 12060, 12240, 12600, 12780, 12960, 13140, 13320, 13500, 13680, 13860, 14040, 14220, 14400, 14580, 14760, 14940, 15120, 15300, 15480, 15660, 15840, 15660, 15840, 16020, 16200, 16380, 16560, 16740, 16920, 17100, 17280, 17460, 17540, 17820
],
xpToNext,
newXp,
currentLevel,
currentXp,
currentSpareXp,
goalLevel,
levelBaseXp,
nextLevelXp,
totalXp, 
spareXp,
xpToGoal,
trainerBattle,
officialWin,
officialLoss,
wildPokemon = '<p>Enter your current level, Current XP, and new XP to add in. The new level and new remaining XP will be displayed.</p><p><b>Your Level:</b> <input class="forminput" type="number" min="1" max="100" onKeyUp="inputFullLevel(this, this.value)" id="currentlevel"><br> <b>Current XP:</b> <input class="forminput" type="number" min="0" max="17820" onKeyUp="inputSpareXp(this, this.value)" id="currentXp"><br><b>New XP:</b> <input class="forminput" type="number" min="1" max="17820" onKeyUp="inputXp(this, this.value)" id="newXp"></p><button class="forminput" type="button" onclick="wildPokemon()">Calculate</button>';


   function switchCalc() {
      var c = document.getElementById("calc_select"),
        calcActive = c.options[c.selectedIndex].value;
      document.getElementById("calc-desc").innerHTML = eval(calcActive);
      document.getElementById("calc-results").innerHTML = '';
            }
    
  function runWildPokemon(){
    currentLevel = document.getElementById("currentLevel").value;
    currentXp = document.getElementById("currentXp").value;
    newXp = document.getElementById("newXp").value;
    const cb = document.getElementById('xpShare');
    const cb2 = document.getElementById('luckyEgg');
    console.log(cb.checked);
    xpToNext = xpToLevel[currentLevel - 1];
    newTotalXp = parseInt(newXp) * 0.5;
    
    if (document.getElementById("xpShare").checked == true) {
      newTotalXp *= 0.5;
    }
   
    if (document.getElementById("luckyEgg").checked == true) {
      newTotalXp *= 1.5;
    }

    while(currentXp >= xpToNext) {
      currentXp = currentXp - xpToNext;
      currentLevel = currentLevel + 1;
      xpToNext = xpToLevel[currentLevel - 1];
    }
    document.getElementById("calc-results").innerHTML = '<b>Level:</b> ' + currentLevel +'   <b>XP:</b> ' + '[' + newTotalXp + '/' + xpToNext + ']';
  }

        function inputXp(field, input) {
    if (input > 17820) {
    field.value = 17820;
    }
            if (input < 0) {
    field.value = 0;
        }
    }
        function inputSpareXp(field, input) {
        if (input > 17819) {
    field.value = 17819;
    }
            if (input < 0) {
    field.value = 0;
        }
    }
        function inputFullLevel(field, input) {
        if (input > 100) {
    field.value = 100;
    }
            if (input <= 0) {
    field.value = 1;
        }
    }
        function inputLevel(field, input) {
        if (input > 99) {
    field.value = 99;
    }
            if (input <= 0) {
    field.value = 1;
        }
    }
</script>

<style>
#calculator{
width: 300px;
background: var(--back1);
margin: auto;
padding: 10px;
border: 10px solid var(--outline);
}
</style>

标签： javascripthtml