Practice Set: Functions to Reduce Repetitive Code

by Ramya Ranganathan

HTML

<p>There is one exercise in this practice set.</p>
<p>In this exercise, you will take some of the repetitive code in this example and move it into a function that performs the same task. In your solution, you'll call your new function three times instead of having the code duplicated in three places. See the code comments for more guidance.  </p>
<p>Remember that code can be awfully difficult to debug in JSFiddle. If you get frustrated trying to find a bug as you write your solution, you may want to copy this example to a local version on your computer to work it out, then paste it back in to JSFiddle.</p>
    <p>
        <div id="doIt" class="button">Calculate Averages</div>
    </p>
   

<table border="1">
    <table border="1">
      <tbody>
          <tr>
              <th>Number 1</th> 
              <th>Number 2</th>
              <th>Number 3</th>
              <th>Row Average</th>
          </tr>
        <tr>
          <td><input value="23" class="row1" type="text"><br>
          </td>
          <td><input value="50" class="row1" type="text"><br>
          </td>
          <td><input value="74" class="row1" type="text"><br>
          </td>
          <td id="row1Average" class="avg"><br>
          </td>
        </tr>
        <tr>
          <td><input value="41" class="row2" type="text"><br>
          </td>
          <td><input value="16" class="row2" type="text"><br>
          </td>
          <td><input value="27" class="row2" type="text"><br>
          </td>
          <td id="row2Average" class="avg"><br>
          </td>
        </tr>
        <tr>
          <td><input value="90" class="row3" type="text"><br>
          </td>
          <td><input value="51" class="row3" type="text"><br>
          </td>
          <td><input value="55" class="row3" type="text"><br>
          </td>
          <td id="row3Average" class="avg"><br>
          </td>
        </tr>
      </tbody>
    </table>

CSS

.avg{
    width: 25%;
    font-weight: bold;
}
.button:hover{
    cursor:pointer;
}
.row1, .row2, .row3 {
    width: 5em;
}
.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

JavaScript

// function to calculate average
function calcRowAverage(row) {
    sum=0;
    count=0;
    value=0;
    var rowInputs = document.getElementsByClassName(row);
    for(var i=0; i<rowInputs.length; i++){
        value = parseInt(rowInputs[i].value);
        if (value){
            sum += value;
            count++;
        }
    }
    var rowAvg = sum/count;
    var rowAverage = row.concat("Average")
    document.getElementById(rowAverage).innerHTML = rowAvg;
}

document.getElementById("doIt").onclick = function()

{
  // calling function to calvulate row averages
    calcRowAverage("row1");
    calcRowAverage("row2");
    calcRowAverage("row3");
    
}