Using JavaScript to loop through a HTML table and do math?

JavaScript
1

I started with the code in the picture to make a list of calculations. I now need to take this and get rid of the array and use a html table. I then need to loop through the table and add the proper answer (and highlight). I’m having issues looping through. The code I have loops through the table, but I need the Actual answers column to be filled. I need to figure out how to use JavaScript to fill in the actual answer. The first picture is what comes up with my code I have here.
The second picture is what I need it to be.
I need to somehow loop through and do the math to see if the number in the answer column is correct and add the highlighted number into the Actual Answer column.

Here is the code I’m using right now with the actual answer filled in.

table { border-collapse: collapse; width: 80%; margin: 1em; } td,th { border: solid grey 1px; padding: 5px; } th { background-color: #90EE90; } td { text-align: center; } .badAnswer { background-color: #f47c6f; } 
	<table id='table-math'>
	  <thead>
		<tr>
		  <th> 1st Number </th>
		  <th> 2nd Number </th>
		  <th> Answer </th>
		  <th> Actual Answer </th>
		</tr>
	  </thead>
		  <tbody>
			<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
			<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
			<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
			<!--actual answer is needed -->
			<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
			<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
			<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>

			<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
			<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
			<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
			<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
		  </tbody>
	</table>

<script language="javascript" type="text/javascript">
	const tableMath = document.getElementById('table-math');

for (let line=1; line < tableMath.rows.length; line++)
  {
  if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
	{
	tableMath.rows[line].cells[3].classList.add('badAnswer')
	}
  }

</script>
	</div>

Am I even close to the proper code in JavaScript?

Screen Shot 2020-04-20 at 10.52.22 AM
Screen Shot 2020-04-20 at 10.52.22 AM954×1218 139 KB

Thank you for any bit of help I can get.

2

I’m unclear of the purpose here.
Are you trying to correct the table or the math?

The problem with the math is in your array where one of the elements
states [8,3,13] when it should be [8,3,11]. Do you have a data entry error?

If you want to correct the table without an array, just using the HTML only
then the following would be closer. Note the error with the results = 8
is due to the spacing of the table entry, not the math. Could be easily corrected
by the correct typing of the table (no spaces) or adding some strip code of the textContent values prior the the JS checks.

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">

<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 .badAnswer { background: pink; }
</style>

</head><body>

<table id='table-math'>
  <thead>
	<tr>
	  <th> 1st Number </th>
	  <th> 2nd Number </th>
	  <th> Answer </th>
	  <th> Actual Answer </th>
	</tr>
  </thead>
  <tbody>
	<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
	<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
	<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
	<!--actual answer is needed -->
	<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
	<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
	<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>

	<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
	<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
	<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
	<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
  </tbody>
</table>

<script>
const tableMath = document.getElementById('table-math');  
var rc0, rc1;
for (let line=1; line < tableMath.rows.length; line++) {
  rc0 = tableMath.rows[line].cells[0].textContent;
  rc1 = tableMath.rows[line].cells[1].textContent;
  tableMath.rows[line].cells[2].textContent = Number(rc0)+Number(rc1);

  if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )	{
    tableMath.rows[line].cells[3].classList.add('badAnswer')
  }
}

</script>

</body></html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.