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?
Thank you for any bit of help I can get.