亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JS函數無緣無故停在100

JS函數無緣無故停在100

郎朗坤 2022-07-01 10:15:49
我正在構建一個游戲統計計算器,但遇到了一個奇怪的問題。我有 4 個統計數據,并且我有一個起點池可以分布在這 4 個統計數據中。我使用按鈕添加統計點,但我也使用按鈕刪除統計點以防出錯。多虧了這里的幫助,我設法通過減少剩余池并增加我點擊的統計數據來完成添加技能點的初始邏輯。這很好用。但是,當我介紹刪除點函數時,它們的行為很奇怪。我知道這是一個數學/邏輯問題,但我無法解決。出于某種原因,一旦我將 100 個統計點分配給 4 個統計數據中的任何一個,刪除函數就會停止滿足 If 條件。這是我的做法:// statsconst str = document.getElementsByName('str');const dex = document.getElementsByName("dex");const vit = document.getElementsByName("vit");const ene = document.getElementsByName("ene");const statsRemaining = document.getElementsByName("statsRemaining");// Add statsfunction addStr() {  if (statsRemaining[0].value > 0) {    str[0].value++;    statsRemaining[0].value--;  }}function addDex() {  if (statsRemaining[0].value > 0) {    ++dex[0].value;    --statsRemaining[0].value;  }}function addVit() {  if (statsRemaining[0].value > 0) {    vit[0].value++;    statsRemaining[0].value--;  }}function addEne() {  if (statsRemaining[0].value > 0) {    ene[0].value++;    statsRemaining[0].value--;  }}// Remove statsfunction removeStr() {  if (str[0].value > str[0].defaultValue) {    str[0].value--;    statsRemaining[0].value++;  }}function removeDex() {  if (dex[0].value > dex[0].defaultValue) {    dex[0].value--;    statsRemaining[0].value++;  }}function removeVit() {  if (vit[0].value > vit[0].defaultValue) {    vit[0].value--;    statsRemaining[0].value++;  }}function removeEne() {  if (ene[0].value > ene[0].defaultValue) {    ene[0].value--;    statsRemaining[0].value++;  }}function resetStats() {  str[0].value = str[0].defaultValue;  dex[0].value = dex[0].defaultValue;  vit[0].value = vit[0].defaultValue;  ene[0].value = ene[0].defaultValue;  statsRemaining[0].value = statsRemaining[0].defaultValue;}您可以在我實施它的地方實時看到它 - https://www.diablo-2.net/character-planner/?class=Necromancer&clevel=99#character-stats。嘗試在每 4 個上分配超過 100 個統計數據,然后刪除停止工作。我有一個 JS fiddle,它的實現更溫和,更適合這里,但我什至用相同的代碼得到不同的結果!- 那里的“能量”數據沒有任何問題! https://jsfiddle.net/Skarsburning/1cjzoxfb/28/感謝幫助解決這個邏輯/數學問題。
查看完整描述

3 回答

?
四季花海

TA貢獻1811條經驗 獲得超5個贊

您這樣做的方式絕對不是 DRY,但要解決您的問題,您只需確保將數值(以數字表示)與字符串值(以字符數為單位)進行比較。


所以statsRemaining[0].value應該是Number(statsRemaining[0].value)


編輯


我附上了一個更好的方法來做你正在尋找的無限擴展(你不必為更多屬性添加更多統計狀態等)


這是小提琴:https ://jsfiddle.net/jrhager84/5xvzmnc6/42/


// stats

const str = document.getElementsByName('str');

const dex = document.getElementsByName("dex");

const vit = document.getElementsByName("vit");

const ene = document.getElementsByName("ene");

const statsRemaining = document.getElementsByName("statsRemaining");


function statDist(elem, shouldAdd)

{

  var selected = elem.parentNode.getElementsByClassName("stat")[0];

  

  if (shouldAdd && Number(statsRemaining[0].value) > 0)

    {

      selected.value++

      statsRemaining[0].value--;

    } else if (!shouldAdd && Number(selected.value) > 0)

    {

      statsRemaining[0].value++;

      selected.value--;

    } else 

    {

      alert("No more skill points!");

    }

}


function resetStats() {

  str[0].value = str[0].defaultValue;

  dex[0].value = dex[0].defaultValue;

  vit[0].value = vit[0].defaultValue;

  ene[0].value = ene[0].defaultValue;

  statsRemaining[0].value = statsRemaining[0].defaultValue;

}

<div class="stat-card">

<p>Strength</p>

        <input class="stat" type="number" value="85" name="str" id="str" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span>  <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span>

</div>


<div class="stat-card">

<p>Dexterity</p>

        <input class="stat" type="number" value="25" name="dex" id="dex" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span>  <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span>

</div>


<div class="stat-card">

<p>Vitality</p>

        <input class="stat" type="number" value="15" name="vit" id="vit" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span>  <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span>

        </div>

        <div class="stat-card">

<p>Energy</p>

        <input class="stat" type="number" value="10" name="ene" id="ene" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span>  <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span>

        </div>

        <br><br>

<p>Stat points remaining: <input style="width: 42px;" type="number" name="statsRemaining" value="10" readonly /></p><br>

<input type="button" name="reset" value="Reset Stats" onclick="resetStats()" />

這是在 vanilla JS 中完成的,如果您使用 jQuery,則不必向<div>統計信息添加類和 s 以使定位方式更容易。


這是香草JS方式:

  1. <div>為每個統計數據創建一個元素。添加類名'stat',以便您可以使用js定位父<div>級,然后找到它的子級名'stat'。

  2. onclick 發送到相同的函數,而不是單獨的函數。您使用this這樣函數就知道哪個 this在說話,并且您使用布爾值來判斷它是否應該加法或減法。所以如果你添加onclick="statDist(this,true)",那就是告訴函數'這個按鈕調用了函數,所以找到它的父div。抓住輸入類并使用它。然后,下一個參數是布爾值,它告訴函數您是要點還是減點。

  3. 在函數內部,您必須主要狀態:shouldAdd!shouldAdd. 所以它基本上是兩個功能合二為一。

  4. 如果任何一個用完點,else 語句就會觸發。如果您愿意,您顯然可以在此基礎上進行構建。


查看完整回答
反對 回復 2022-07-01
?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

這不起作用的原因是因為每個函數內部的大于/小于比較是將字符串值與另一個字符串值進行比較。來自 DOM 的文本輸入元素的值是字符串。當您在 JavaScript 中比較兩個字符串時,它使用“字典式”比較(如果您好奇,請參閱此處了解其工作原理)。簡而言之,字符串“100”不大于 JavaScript 中的字符串“85”。這個問題很容易解決 - 只需通過調用 Number() 將輸入字符串值轉換為數字。例如:


function removeStr() {

  const strInput = str[0];

  const remainingDisplay = statsRemaining[0];

  let str = Number(strInput .value);

  let initialStr = Number(strInput.defaultValue);

  let statsRemaining = Number(remainingDisplay.value)

  if (str > initialStr) {

    strInput.value = str - 1;

    remainingDisplay .value = statsRemaining - 1;

  }

}

另一個提示:您可以通過為每個輸入元素分配一個 id 然后使用 document.getElementById('inputId') 而不是使用 getElementsByName 來避免所有這些數組 [0] 位置。


查看完整回答
反對 回復 2022-07-01
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

注意:僅對第一個“str”命名元素執行此操作。


好吧,我在小提琴的代碼上嘗試了這個簡單的東西,它奏效了。


function removeStr() {

  console.log("Def:"+str[0].defaultValue);

  console.log("val:"+str[0].value);

    if (parseInt(str[0].value) > parseInt(str[0].defaultValue)) { **-> HERE**


    str[0].value--;

  statsRemaining[0].value++;

  }

}

在這里查看。

http://img1.sycdn.imooc.com//62be59140001937111450645.jpg

如上所示,我將值增加到 100,而不是減去到 100 以下。



查看完整回答
反對 回復 2022-07-01
  • 3 回答
  • 0 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號