Click here to Skip to main content
15,905,607 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
i want the second table to work exactly the same with javascript that makes it respond the same way as the first one is doing.help me edit the javascript so that it works with all duplicates that i am going to add

What I have tried:

<html>
    <head>
        
        <title>calculate</title>
    <style>
      table {
          width: 50px;
          box-sizing:border-box;
          border: 1px solid black;
          border-collapse: collapse;
          font-family:monospace
        }
        td {
          border: 1px solid black;
          padding: 0px;
          font-size: 10px;
        }
        th {
          border: 1px solid black;
          padding: 0px;
        }
       
        table {
          box-sizing:border-box;
          font-family:monospace
        }
        td,th{padding:0.25rem;}

        [data-elem='carbon']{background:rgba(0,0,100,0.1)}
        [data-elem='sulphur']{background:rgba(0,100,0,0.1)}
        [readonly]{background:rgba(255,0,0,0.1)}

        .input{width:3rem}
        .result{width:3.5rem}
        input{border:1px solid grey;padding:0.2rem;}
    </style>    
    <script>
      const reducer = (a, c) => a + c;
      const average = (n) => parseFloat(n.value) || 0;

      const calculateAndCheckDifference = () => {
          const table = document.querySelector('table');
          const input1 = parseFloat(table.querySelector('tr[data-group="1"] input[data-elem="carbon"][data-input="1"]').value);
          const input2 = parseFloat(table.querySelector('tr[data-group="1"] input[data-elem="carbon"][data-input="2"]').value);
          const result = table.querySelector('tr[data-group="1"] input[data-elem="carbon"].result');

          if (!isNaN(input1) && !isNaN(input2)) {
        
              result.value = (average(table.querySelector('tr[data-group="1"] input[data-elem="carbon"][data-input="1"]')) + average(table.querySelector('tr[data-group="1"] input[data-elem="carbon"][data-input="2"]'))) / 2;

              const difference = Math.abs(input1 - input2);
              if (difference > 0.3) {
                  alert("NOT REPEATABLE.");
              }
          }
      };
    </script>
    </head>
       <body>

        <table>
        <tr>
            <th>%<br />Carbon</th>
            <th>Average<br />Carbon</th>
        </tr>

        <tr data-group="1">
            <td><input type="text" class="input" data-elem="carbon" data-input="1" placeholder="input1" /></td>
            <td><input type="text" class="input" data-elem="carbon" data-input="2" placeholder="input2" /></td>
            <td><input type="text" class="result" data-elem="carbon" readonly placeholder="average" /></td>
        </tr>
        <button onclick="calculateAndCheckDifference()">Calculate and Check</button>
        </table>
        <table>
        <tr>
          <th>%<br />Carbon</th>
          <th>Average<br />Carbon</th>
      </tr>

      <tr data-group="1">
          <td><input type="text" class="input" data-elem="carbon" data-input="1" placeholder="input1" /></td>
          <td><input type="text" class="input" data-elem="carbon" data-input="2" placeholder="input2" /></td>
          <td><input type="text" class="result" data-elem="carbon" readonly placeholder="average" /></td>
      </tr>
       <button onclick="calculateAndCheckDifference()">Calculate and Check</button>
    </table>
   
</body>
      
</html>
Posted
Updated 13-Aug-23 21:57pm
Comments
Andre Oosthuizen 14-Aug-23 3:57am    
Duplicate the table to where?
Same results as what?

You need to be more specific, at the moment the question does not make sense, no examples given, we cannot guess what you require.
Ndambakuwa Mabarira 14-Aug-23 5:06am    
the code that i have sent has got twotables.the first table is the one on top with its caculating button.the one below is the second table which is a duplicate.the table on top is calculating the average and also shows an alert when the results are out of the limits.that is perfect. i added another table below(a duplicate) with the same structure with that first one.that second table is just a duplicate.
Now my problem is that i want that second table to act the same way with the first one if i edit into its input fields.to be more specific i want it to calculate the average and also the limit just like the first table.
NOTE:i just added a duplicate table but javascript is working properly with the first table but with the second table its not calculating the average but its showing an alert
i am willing to explain further if its not clear again

1 solution

document.querySelector will return the first matching element in your document.

Assuming you want to update the parent table of the button you clicked, you need to use the event object's target property:
HTML
<button onclick="calculateAndCheckDifference(event)">Calculate and Check</button>
JavaScript
const calculateAndCheckDifference = (e) => {
    const table = e.target.closest("table");
    ...
};

However, your HTML as it stands is invalid. A <table> element cannot directly contain a <button> element. You need to wrap the button in <tr> and <td> tags to make it part of the table.
 
Share this answer
 
Comments
Ndambakuwa Mabarira 15-Aug-23 1:03am    
i am sorry i am lost on using the event object`s target property.
if you can explain further i would really appreciate that

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900