JS for循环来填充数组

Question

美好的一天，快乐的新年

所以我遇到了一个问题，我宁愿不将所有内容直接绑定到一个数组中并从那里调用它。 我正在建立一个基于旧学校聊天的角色扮演游戏，我遇到的问题是传递由角色统计数据决定的技能。 基本上我想要做的是这样的：

我有一堆按钮，共有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>

skillRate（s）反映在适当的变量中，如下所示：

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
}

或者，也许您可​​以使用将地图[技能]存储到点的地图结构。 而且，只要具备该功能的技巧，您就可以从地图上获得积分。

Answer 2

不知道为什么你不想要阵列，他们是你的朋友。

此代码将从数组构建一个表，但仅将其用于构建，所有计算稍后将从html中获取。

这是vanilla js，使用jQuery可能更容易/更漂亮。

JS：

//This is just for building the table, you don't have to use it if you don't want array for some reason :S
var skillsArr = [{
  firstSkillName: "Memory",
  firstSkillValue: 15,
  secondSkillName: "Logic",
  secondSkillValue: 17
}, {
  firstSkillName: "Dexterity",
  firstSkillValue: 12,
  secondSkillName: "Speedness",
  secondSkillValue: 11
}];

var table = document.getElementById("tblSKills");
var tableBody = table.createTBody();

for (i = 0; i < skillsArr.length; i++) {
  var row = tableBody.insertRow(i);
  var cell = row.insertCell(0);
  cell.innerHTML = skillsArr[i].firstSkillName + ": " + "<span>" + skillsArr[i].firstSkillValue + "</span>";
  cell = row.insertCell(1);
  cell.innerHTML = skillsArr[i].secondSkillName + ": " + " <span>" + skillsArr[i].secondSkillValue + "</span>";
  cell = row.insertCell(2);
  cell.innerHTML = "<button onclick='doMath(this)'>DO THE MATH</button>";
}

function doMath(currnetBtn) {  
  var currentRow = currnetBtn.parentElement.parentElement; //TD -> TR
  var currentCells = currentRow.children;

  var skill1 = document.getElementById("skill1");
  var skill2 = document.getElementById("skill2");
  var mathResult = document.getElementById("mathResult");

  skill1.value = currentCells[0].innerText;
  skill2.value = currentCells[1].innerText;

  mathResult.value = (currentCells[0].children[0].innerText/1) * 3 + (currentCells[1].children[0].innerText/1) *2 ;//This is your *3 + *2 function or whatever you want.
  //You can also make that each skill set will have its' own math function.
}

HTML：

<h1>
Welcome to my skill page!
</h1>
<h2>
Your results:
</h2>
<label id="lbl1"></label>
<input id="skill1" readonly />
<label id="lbl2"></label>
<input id="skill2" readonly />
<label>Result:</label>
<input id="mathResult" readonly />

<table id="tblSKills">

</table>

- 小提琴 -