JS для цикла, чтобы заполнить массив

Question

Добрый день всем и счастливым б-веден новый год

Так что я получил проблема, и я не хотел бы связать все прямо в массив и вызвать его оттуда. Я создаю старую школьную чатовую 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 (ов), отражаются в соответствующих переменных следующим образом:

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.

Это 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 --