D3 leg counter

by lun471k

HTML

<h1 class="unselectable">Jeff's Legendary dropsheet</h1>
<table>
  <thead>
    <tr>
      <th>Add</th>
      <th>Source</th>
      <th>#</th>
      <th>%</th>
    </tr>
  </thead>
  <tfoot>
  </tfoot>
  <tbody>
    <tr class="superminions">
      <td class="add"><a href="#">+</a>
      </td>
      <td class="source_name">Champion pack</td>
      <td class="leg_count" contenteditable="true">0</td>
      <td class="percentage">0.00</td>
    </tr>
    <tr class="superminions">
      <td class="add"><a href="#">+</a>
      </td>
      <td class="source_name">Elite pack</td>
      <td class="leg_count">0</td>
      <td class="percentage">0.00</td>
    </tr>
    <tr class="goblin_family">
      <td class="add"><a href="#">+</a>
      </td>
      <td class="source_name">Treasure Goblin</td>
      <td class="leg_count">0</td>
      <td class="percentage">0.00</td>
    </tr>
    <tr class="goblin_family">
      <td class="add"><a href="#">+</a>
      </td>
      <td class="source_name">Treasure Bandit</td>
      <td class="leg_count">0</td>
      <td class="percentage">0.00</td>
    </tr>
    <tr class="goblin_family">
      <td class="add"><a href="#">+</a>
      </td>
      <td class="source_name">Treasure Seeker</td>
      <td class="leg_count">0</td>
      <td class="percentage">0.00</td>
    </tr>
    <tr class="goblin_family">
      <td class="add"><a href="#">+</a>
      </td>
      <td class="source_name">Treasure Pigmy</td>
      <td class="leg_count">0</td>
      <td class="percentage">0.00</td>
    </tr>
  </tbody>
</table>
<button id="reset_button">Reset</button>

CSS

/* External Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* General stuff */
html
{
    font-family:"Open Sans",arial,sans-serif;
    background-color:#DDD;
}

.unselectable
{
  cursor:default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Title (really) */
h1
{
    text-align:center;
}

/*********************/
/* Table formatting  */
/*********************/
table, tr
{
    border:1px solid black;
    border-collapse:collapse;
    margin:0 auto;
    cursor:default;
}
th
{
}
td,th
{
    border-right:1px solid #333;
    margin:0;
    padding:3px;
    text-align:center;
}
.add
{
    width:auto;
    padding-left:0;
    padding-right:0;
    background-color:#333 !important;
    font-size:1.4em;
}
.add a
{
    text-decoration:none;
    color:#0F0;
    font-weight:bold;
}
.source_name
{
    text-align:left;
}
/******************/
/*  Source groups */
/******************/
.superminions td
{
    background-color:#FCA;
}
.goblin_family td
{
    background-color:#CAF;
}

JavaScript

window.onload = function ()
{
  var countCells;
    
  function validateNumber(event)
  {
    if (isNaN(event.target.innerHTML))
    {
      event.target.focus();
      alert("Please enter a valid legendary count.");
    }
    else
    {
      updatePercentage();
    }
    return true;
  }

  function updatePercentage()
  {
    var leg_countElements = document.getElementsByClassName("leg_count");
    var percentageElements = document.getElementsByClassName("percentage");
    var total_legs = 0;
    var leg_per_source = [];

    for (var source = 0; source < leg_countElements.length; ++source)
    {
      leg_per_source[source] = parseInt(leg_countElements[source].innerHTML, 10);
      total_legs += parseInt(leg_countElements[source].innerHTML, 10);
    }

    for (var source = 0; source < leg_per_source.length; ++source)
    {
      var partOfCake = leg_per_source[source] / total_legs * 100;
        if(isNaN(partOfCake))
        {
            partOfCake = 0.000;
        }
      percentageElements[source].innerHTML = partOfCake.toFixed(2).toString();
    }

    return true;
  }

  function clearAll()
  {
    var result = confirm("Do you really want to clear all fields?");
    if(result)
    {
        for(var rowIndex=0; rowIndex<countCells.length; ++rowIndex)
        {
            countCells[rowIndex].innerHTML = "0";
        }
          updatePercentage();
    }
      
      return true;
  }
    
  function foundLegendary(event)
  {
    event.preventDefault();
    var anchor_element = event.target;
    var source_element = anchor_element.parentNode.nextElementSibling;
    var count_element = source_element.nextElementSibling;
    var count = parseInt(count_element.innerHTML, 10);
    count_element.innerHTML = count + 1;
    updatePercentage();
    return true;
  }

  function init()
  {
    var addCells = document.getElementsByClassName("add");
    countCells = document.getElementsByClassName("leg_count");

    for (var rowIndex = 0; rowIndex < addCells.length;...