如果这是一个愚蠢的问题，我很抱歉，我是一个初学者。
我运行一款D&D游戏，我认为一个简单的主动跟踪器是练习编码的好工具。
目前，我只是试图为名称和初始修饰符创建一个具有用户定义属性的新对象。将其推入战斗数组，并在每次按下saveCombBtn时将其显示在其余内容的下方。下面是目前为止我得到的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Initiative Tracker</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Initiative Tracker</h1>
<div id="canvas">
<div class="CombInElCont">
<input id="combNameInEl" placeholder="Combatant Name">
<input id="combInitModInEl" placeholder="Initiative Modifier" type="Number">
<button id="saveCombBtn">Save Combatant</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript:
// Gets initial elements
const canvas = document.querySelector('#canvas');
const combInElCont = document.querySelector('.combInElCont');
const combNameInEl = document.querySelector('#combNameInEl');
const combInitModInEl = document.querySelector('#combInitModInEl');
const saveCombBtn = document.querySelector('#saveCombBtn');
const combArray = [];
// Combatant Object Constructor
function Combatant(combName, combInitMod) {
this.name = combName;
this.initMod = combInitMod;
}
// Reads user input, saves data to object, and pushes it to array
saveCombBtn.addEventListener('click', saveCombatant);
function saveCombatant() {
console.log('saveBtn pressed');
let combName = combNameInEl.value;
let combInitMod = combInitModInEl.value;
let newComb = new Combatant(combName, combInitMod);
combArray.push(newComb);
combNameInEl.value = '';
combInitModInEl.value = '';
disCombInfo();
};
// Displays combatant info underneath inputs
function disCombInfo() {
for (let i = 0; i < combArray.length; i++) {
canvas.innerHTML += `
<div class="combInfoDisp">
<p>
Combatant Name:<br>
${combArray[i].name}<br>
Initiative Modifier:<br>
${combArray[i].initMod}
</p>
</div>
`
console.log(combArray[i]);
};
};
代码在第一次按下按钮时工作得很好，但甚至不会记录第二次按下按钮。
我目前唯一的理论是，我不能创建同名的多个对象(虽然我不认为这解释了为什么按钮甚至不注册被按第二次)。是否有一种方法可以在每次调用函数时给对象一个唯一的名称，还有其他可能导致问题的东西吗?
试试这个:
// Gets initial elements
const canvas = document.querySelector('#canvas');
const combInElCont = document.querySelector('.combInElCont');
const combNameInEl = document.querySelector('#combNameInEl');
const combInitModInEl = document.querySelector('#combInitModInEl');
const saveCombBtn = document.querySelector('#saveCombBtn');
const combArray = [];
// Combatant Object Constructor
function Combatant(combName, combInitMod) {
this.name = combName;
this.initMod = combInitMod;
}
// Reads user input, saves data to object, and pushes it to array
saveCombBtn.addEventListener('click', saveCombatant);
function saveCombatant() {
console.log('saveBtn pressed');
let combName = combNameInEl.value;
let combInitMod = combInitModInEl.value;
let newComb = new Combatant(combName, combInitMod);
combArray.push(newComb)
disCombInfo(newComb);
};
// Displays combatant info underneath inputs
function disCombInfo(newComb) {
var combatant = document.createElement('div');
combatant.classList.add('combInfoDisp');
combatant.innerHTML = `
<p>
Combatant Name:<br>
${newComb.name}<br>
Initiative Modifier:<br>
${newComb.initMod}
</p>
`
canvas.appendChild(combatant);
console.log(combArray);
};<!DOCTYPE html>
<html>
<head>
<title>Initiative Tracker</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Initiative Tracker</h1>
<div id="canvas">
<div class="CombInElCont">
<input id="combNameInEl" placeholder="Combatant Name">
<input id="combInitModInEl" placeholder="Initiative Modifier" type="Number">
<button id="saveCombBtn">Save Combatant</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
您的原始代码的问题是，它直接追加到canvas元素的innerHTML，这搞砸了按钮的eventListener，因为它是在画布中定义的。因此，我的解决方案主要包括让画布的innerHTML保持不变，并直接添加一个新元素，该元素是用javascript的createElement函数动态创建的。