如何在不显示"NaN"的情况下为多个属性复制此代码？

Question

代码为Strength工作，直到我复制它为其他代码工作，它禁用了按钮。我想知道如何将其转换为其他领域，即敏捷性。我用力量来填补价值，但我不知道如何从那里开始。

<script>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled() {
// If strength less than equal zero disable the button
if(strength <= 0) {
document.getElementById("subButton").setAttribute('disabled', 'disabled');
}
else {
document.getElementById("subButton").removeAttribute('disabled');
}
}
function subStrength(){
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
function addStrength(){
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
<th scope="col">
<button class="button" type="button" onclick="subStrength();" 
value="subtract">-</button>
<th><span id="strength"></span></th>
<th scope="col">
<button class="button" type="button" onclick="addStrength()" value="add">+ 
</button>
</th>
</th>

Answer 1

您的代码不是完全可重用的代码，并且缺少一些组件，例如id属性。重用此代码的最佳方式是创建一个为您生成按钮的函数，这样添加/子函数的范围就正确了。这是我为您创建的纯JavaScript解决方案。

此外，你似乎正在创建一个游戏，可能是一个RPG，在这种情况下，我强烈建议你使用一个围绕可重用组件设计的框架，比如React。如果你对此不感兴趣，至少jQuery可以让元素创建更愉快。

var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');

labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}

if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}

wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);

return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) { 
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});

<section id="stats"></section>