JS for循环填充数组答案

【问题标题】：JS for loop to fill arrayJS for循环填充数组
【发布时间】：2017-01-08 19:41:03
【问题描述】：

大家好，新年快乐

所以我遇到了一个问题，我不想将所有内容都直接绑定到一个数组中并从那里调用它。我正在构建一个基于老式聊天的 RPG，但在传递由角色统计信息决定的技能方面遇到了问题。基本上我想要做的是：

我有一堆按钮，总共代表 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));
  }
}

我这几天一直在胡思乱想，但似乎无处可去，我真的不想把所有技能和他们各自的技能率放在一个数组中，除非我必须这样做。

关于如何完成这个或其他方法的任何想法或建议？

提前致谢！

【问题讨论】：

我的建议是将所有数据保留在 JavaScript 端，并仅将 HTML 用于演示目的，但这似乎是您要避免的。
如果您想坚持将数据放在 HTML 中，您可能会发现 HTML 数据/数据集属性在这里很有帮助。这是入门sitepoint.com/use-html5-data-attributes
感谢 Jacob，但不，我只是想让用户看到他们在单击按钮时选择了一项技能，因此只需将名称和评分放到他们技能列表下的表格中。我都是为了将数据保存在 JS 文件中
我已经添加了一个答案，如果不是你想要的，请告诉我。

标签： javascript arrays loops

【解决方案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
}

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

【讨论】：

我正在查看 data-* 选项，但我的理解是它只允许有字符串？我想即使那样我也可以做一个解析，对吧？无论如何，我觉得这就是我正在寻找的东西，但不需要总和。数学技能的比率就是 = var math = (mem * 3) + (log * 2); 那么我可以设置 dataset.point = math; 吗？
是的，如果有必要，只需将其解析为整数即可。我的求和运算只是一个例子。在您的情况下，您可以设置迭代 document.getElementByTagName('button") 数组，例如，使用 element.dataset.point = math.var elements = document.getElementByTagName('button") for(var i = 0; i < elements.length; i++){ // Some operations here elements[i].dataset.point = math; } 设置每个元素
例如，最好设置一个名为“技能按钮”的类，并通过document.getElementByClassName('skills-button') 获取它。只是为了避免与页面内的其他按钮发生冲突。

【解决方案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>

-- Fiddle --

【讨论】：