如果这是一个愚蠢的问题，我很抱歉，我是一个初学者。
我运行一个D&D游戏，我认为一个练习编码的好东西将是一个简单的主动性跟踪器。
目前，我只是尝试创建一个新对象，它包含用户定义的name和initiative修饰符属性。将它推送到combatant数组，并在每次按下saveCombBtn时将其显示在其余内容的下面。以下是我目前为止为它获得的代码：
于飞：
<!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]);
};
};代码在第一次按下按钮时工作得很好，但甚至不会记录第二次按下按钮。
我目前唯一的理论是，我不能创建多个同名的对象（尽管我不认为这能解释为什么按钮在第二次被按下时都没有注册）。有没有一种方法可以在每次调用函数时给予对象一个唯一的名称，还有什么其他可能会引起我的问题？
1条答案
按热度按时间1mrurvl11#
试试这个：
第一个
已编辑
原始代码的问题是它直接追加到
canvas元素的innerHTML，这会弄乱按钮的eventListener，因为它是在画布中定义的。所以我的解决方法主要包括保留画布的innerHTML不变，并直接追加一个新元素，该新元素是用javascript的createElement函数动态创建的。