javascript - JS for 循环填充数组

Question

大家好，新年快乐

所以我遇到了一个问题，我宁愿不将所有内容直接绑定(bind)到数组中并从那里调用它。我正在构建一个基于老式聊天的 Angular 色扮演游戏，但我遇到了传递由 Angular 色统计数据决定的技能的问题。本质上我想做的是:

我有一堆按钮，总共代表 72 种技能:

<td><button type="button" onclick="" class="button" id="math">MATH</button></td>

我想使用他们的 onclick 事件将技能名称和技能等级传递到页面的此目标区域:

<td><input type="text" id="skill1"     value="" readonly /></td>
<td><input type="text" id="skillRate1" value="" readonly /></td>

技能率反射(reflect)在适当的变量中，如下所示:

var math = (mem * 3) + (log * 2);

理想情况下，我将数组中的每个目标接收者分别设置为技能和技能率，这样一旦选择了所有技能，它就会存储在数组中并上传到数据库中。

最初我的想法是这样的:

function addSkill(){
  var n = 0;
  for (n = 0; n < 17; n++){
    getElementById("skill" + n) = getElementById(this.id);
    getElementById("skillRate" + n) = //figure out some way to turn this into the var for skillRate (getElementById(this.id));
  }
}

我已经为此摸索了好几天，但似乎无法取得任何进展，我真的宁愿不只是将所有技能及其各自的技能率放在一个数组中，除非必须这样做。

关于如何实现这个或其他方法有什么想法或建议吗？

提前致谢!

Answer 1

如果我正确理解你的问题，也许你可以这样做:

对于 HTML

<td>
  <button type="button" data-skill="math" data-point="20" onclick="addSkill(this)" class="button" id="math">MATH</button>
</td>

对于 JavaScript

//Start your variables
var tagsSkills = []
var totalPoint = 0;

function addSkill(skill) {
  var dataset = skill.dataset;
  totalPoint += dataset.point; // Here you will sum the skill's point
  tagsSkills.push(dataset.skill); // Add skill into array
}

或者，您可以使用将 map [技能]存储到点的 map 结构。而且，只要熟练掌握该功能，您就能从 map 上获得积分。