JS for loop to fill array

Question

Good day all and happy b-lated new year

So I got a problem and I would rather not tie everything directly into an array and call it from there. Im building an old school chat based RPG and I have hit an issue with passing on the skills which are determined by the characters stats. Essentially what I am trying to do is this:

I have a bunch of buttons which represent a total of 72 skills:

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

which I would like to use their onclick event to pass both the skill name and skill rating to this targeted area of the page:

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

the skillRate(s) are reflected in their appropriate variables like so:

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

and ideally what will happen is I set each targeted recipient in an array as skill and skillRate respectively so that once all the skills are selected it is stored in the array and uploaded into the DB as such.

Originally I was thinking something along the lines of this:

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));
  }
}

I've been bumbling around with this for days now but cant seem to get anywhere and I would really rather not just put all the skills and their respective skillRates in an array unless I have to.

Any thoughts or suggestions as to how to accomplish this or maybe another approach altogether?

Thanks in advance!

Answer 1

If i understood you problem properly, maybe you can do it this way:

For html

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

For 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
}

Or maybe, instead you could use a map structure that store map[skill] to points. And, just with skill in the function, you will have the points just getting it from the map.

Answer 2

Not sure why you don't want array, they are your friends.

This code will build a table from array but only uses it for build, all the calculations are later taken from html.

This is vanilla js, could be easier/prettier with 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 --