JS for循環，以填補陣列

Question

良好的一天，所有的快樂B-遲來的新年

所以我有一個問題，我寧願不直接關聯的一切到一個數組中，並從那裏調用它。我建立了一個基於老式聊天的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); 

理想情況下會發生什麼是我將每個目標收件人分別設置爲技能和skillRate，以便一旦選擇了所有技能，它就會存儲在數組中，並上傳到數據庫中。

本來我是沿着這個線路思考的東西：

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中獲取。

這是香草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 --