Week5 Assignment 2 Practice Set: Functions to Reduce Repetitive Code

by Lucille Kenney

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

console.clear();

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

    
    // Here's the first block of code that calculates the average
    // of the numbers in a row
      // First we get an array of the input elements from the HTML 
    var rowOneInputs = document.getElementsByClassName("row1");
    var rowTwoInputs = document.getElementsByClassName("row2");
    var rowThreeInputs = document.getElementsByClassName("row3");

    document.getElementById("row1Average").innerHTML = calcAvg(rowOneInputs);
    document.getElementById("row2Average").innerHTML = calcAvg(rowTwoInputs);
    document.getElementById("row3Average").innerHTML = calcAvg(rowThreeInputs);

    /*
    // Here we reset sum and count to zero, and do it all again for row2
    sum=0;
    count=0;
    var rowTwoInputs = document.getElementsByClassName("row2");
    for(var i=0; i<rowTwoInputs.length; i++){
        value = parseInt(rowTwoInputs[i].value);
        if (value){
            sum += value;
            count++;
        }
    }
    var rowTwoAvg = sum/count;
    document.getElementById("row2Average").innerHTML = rowTwoAvg;

    // ...and now a third time for the last row
    sum=0;
    count=0;
    var rowThreeInputs = document.getElementsByClassName("row3");
    for(var i=0; i<rowThreeInputs.length; i++){
         value = parseInt(rowThreeInputs[i].value);   
        if (value){
            sum += value;
            count++;
        }
    }
    var rowThreeAvg = sum/count;
    document.getElementById("row3Average").innerHTML = rowThreeAvg;
    */
}

function calcAvg(rowInputs) {
    var sum=0, value=0, count=0;

    // Then we iterate over that array, and for each element...
    for(var i=0; i<rowInputs.length; i++){
        // ...we get its value (parsed to an integer)
        value = parseInt(rowInputs[i].value);
        // ...and if that value isn't undefined or NaN, add
        // it to the sum, and increment the counter
        if (value){ 
            sum += value;
           ...