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方式:
<div>
為每個統計數據創建一個元素。添加類名'stat',以便您可以使用js定位父<div>
級,然后找到它的子級名'stat'。onclick 發送到相同的函數,而不是單獨的函數。您使用
this
這樣函數就知道哪個this
在說話,并且您使用布爾值來判斷它是否應該加法或減法。所以如果你添加onclick="statDist(this,true)"
,那就是告訴函數'這個按鈕調用了函數,所以找到它的父div。抓住輸入類并使用它。然后,下一個參數是布爾值,它告訴函數您是要加點還是減點。在函數內部,您必須主要狀態:
shouldAdd
和!shouldAdd
. 所以它基本上是兩個功能合二為一。如果任何一個用完點,else 語句就會觸發。如果您愿意,您顯然可以在此基礎上進行構建。

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] 位置。

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++;
}
}
在這里查看。
如上所示,我將值增加到 100,而不是減去到 100 以下。
添加回答
舉報