How to duplicate this table multiple times and get the same results as the first table

Question

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 13-Aug-23 19:26pm

Ndambakuwa Mabarira

Updated 13-Aug-23 21:57pm

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2023-08-13T21:57:00

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.