Adding Methods into Javascript code

[jlusty]

Hi Here I have an html Table and with JavaScript I’m looping through and doing math. for each row the first number is added to the second number and if it doesn’t add up to the third number a fourth number is added and highlighted. This works great for me.
I need to create a method (checkCalculate) that receives the child node as a parameter with no return.
my problem is im not sure where to place it?
if I add a method like CheckCalculate: function(‘’){ } where do I put it to add a method into my code and is that how I write a method? I keep trying different places and it keeps breaking my code?

td{ padding-top: 3px; padding-bottom: 3px; padding-right: 20px; padding-left: 20px; }

<title>JavaScript </title>

<h4>Math!</h4>
<table>
    <tbody>
        <tr class="Calculation">
            <td>5</td>
            <td>3</td>
            <td>8</td>
        </tr>
        <tr class="Calculation">
            <td>7</td>
            <td>6</td>
            <td>13</td>
        </tr>
        <tr class="Calculation">
            <td>5</td>
            <td>5</td>
            <td>10</td>
        </tr>
        <tr class="Calculation">
            <td>8</td>
            <td>3</td>
            <td>13</td>
        </tr>
        <tr class="Calculation">
            <td>4</td>
            <td>7</td>
            <td>11</td>
        </tr>
        <tr class="Calculation">
            <td>3</td>
            <td>9</td>
            <td>12</td>
        </tr>
        <tr class="Calculation">
            <td>8</td>
            <td>5</td>
            <td>12</td>
        </tr>
        <tr class="Calculation">
            <td>2</td>
            <td>6</td>
            <td>8</td>
        </tr>
        <tr class="Calculation">
            <td>5</td>
            <td>9</td>
            <td>14</td>
        </tr>
        <tr class="Calculation">
            <td>6</td>
            <td>6</td>
            <td>12</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var calculations = document.getElementsByClassName("Calculation");

    var numberOfCalculations = calculations.length;
	
    for (var counter = 0; counter < numberOfCalculations; counter++)
    {
        var calculation = calculations[counter]; //get the calculation 
        var firstNumber = Number(calculation.childNodes[1].textContent);
        var secondNumber = Number(calculation.childNodes[3].textContent);
        var expectedResult =Number(calculation.childNodes[5].textContent);
        //}
        var result = firstNumber + secondNumber; //add the first 2 numbers together

        if (result == expectedResult) //compare our result with the stored result
        {
            //we're equal
           
        }
        else
        {
            //we're not equal
            calculation.style.backgroundColor = "#FA8072";

            var resultCell = document.createElement("td");
            calculation.appendChild(resultCell);
            resultCell.appendChild(document.createTextNode(result));
        }
        
    } 
    
</script>

This picture is what is supposed to be shown in the web browser.

Thank you

[Paul_Wilkins]

@jlusty

This picture is what is supposed to be shown in the web browser.

Your code already looks to show what’s in that picture.

Can you please give further details about what is required from there?

[jlusty]

Im supposed to add a method and inside the method it would receive the child node as a parameter with no return value. Im not sure if im adding the proper code to add the method or how to properly call the method to have it display properly?

[Paul_Wilkins]

What is that while loop supposed to achieve that isn’t already being done?

[jlusty]

I think im supposed to add the method to that in theory I could reuse this code.

[Paul_Wilkins]

Well you can convert a for loop to a while loop.

Where you had:

    for (var counter = 0; counter < numberOfCalculations; counter++)
    {
        ...
    }

You can change that to a while loop so that it looks like this:

    var counter = 0;
    while (counter < numberOfCalculations;)
    {
        ...
        counter++;
    }

But somehow I doubt that’s what your teacher is asking you to achieve.

[jlusty]

Ok,

the assignment is asking to have a for counter loop through the calculation array. The calculation childNode contains the data i need.

then im supposed to Create a method CheckCalculate that receives the child node as a parameter with no return value. Build the calculation same as previously, The first number is in position 1, the second in position 3, and the expected result in position 5. The textContent of the child node has the value. Remember that page data is text and has to be converted to a number. Add the number in the first field to the number in the second field. If the calculation as described in the html table is incorrect set the background color of the row (the array value) to #FA8072 and dynamically add another cell containing the correct result only to the failed calculation.

[Paul_Wilkins]

Would that mean moving the contents of the for loop out to a separate function, and passing the appropriate node element to the function?

[jlusty]

How would that look?

[Paul_Wilkins]

It would look like this:

    for (var counter = 0; counter < numberOfCalculations; counter++) {
        checkCalculation(calculations[counter]);
    }

[jlusty]

Thanks for the help. I’ll see if this works.

[Paul_Wilkins]

I haven’t done it all for you. You still need the checkCalculation function, which consists of the remainder of the for loop contents.

[jlusty]

How would i write the function. I seem to find a few ways.

function checkCalculations(){
}

Then do I have to call the function differently?

[Paul_Wilkins]

Because the code in the for loop uses the variable calculation for the node, it helps to keep things simple and use calculation as a function parameter.

After the code is moved in to the function and things are made to still work, that’s when it’s a good time to think about renaming the function parameter to a potentially better name.

[jlusty]

Should my JavaScript look anything like this?

  <script type="text/javascript">

        var calculations = document.getElementsByClassName("Calculation");
        

        var numberOfCalculations = calculations.length;

	for (var counter = 0; counter < numberOfCalculations; counter++) {
        checkCalculation(calculations[counter]);
    }

            var calculation = calculations[counter]; //get the calculation 
            var firstNumber = Number(calculation.childNodes[1].textContent);
            var secondNumber = Number(calculation.childNodes[3].textContent);
            var expectedResult =Number(calculation.childNodes[5].textContent);
            //}
            var result = firstNumber + secondNumber; //add the first 2 numbers together
		function checkCalculations(calculation){
            if (result == expectedResult) //compare our result with the stored result
            {
                //we're equal
               
            }
            else
            {
                //we're not equal
                calculation.style.backgroundColor = "#FA8072";
  
                var resultCell = document.createElement("td");
                calculation.appendChild(resultCell);
                resultCell.appendChild(document.createTextNode(result));
            }
            
        } 
		     
    </script>

[Paul_Wilkins]

That’s good for the function call. You just need the function that contains the rest of the contents of the for loop now.

[jlusty]

Ok, right now my JavaScript isn’t displaying?

[Paul_Wilkins]

That’s because you still have work to do in regard to the function itself.

In the function you are making a call to a function that doesn’t yet exist. It’s time for you to create that function.

[jlusty]

Would I build the function before the rest of my script?
and how do I create that function?

[Paul_Wilkins]

I think that qualifies as doing the homework for you, so my involvement ends right here right now.