How can I give a condition to my table so that it gives me an alert when results are not close to each other

Question

0.00/5 (No votes)

See more:

My table can calculate the average, but I want to add an alert with this condition.

1. If the difference between input1 and input2 (that is input1 - input2) is greater than 0.3 (an alert should popup saying "NOT REPEATABLE."
But if the results are close to each other (that is, if input1 - input2 is less than or equal to 0.3), then no alert must be displayed.

NB: The table should keep on calculating the average, but I want to add that feature discribed above.
How do I add that alert in my code below?

What I have tried:

HTML

<!DOCTYPE html>

<html>
    <head>
        
        <title>calculate</title>
    </head>
    <script>     
        const reducer=(a,c)=>a+c;
        const average=(n)=>parseFloat( n.value ) / 2 || 0;
        
        const keyuphandler=(e)=>{
          if( e.target instanceof HTMLInputElement && e.target.type=='text' ){
        
            let table=e.target.closest('table');
            let tr=e.target.closest('tr');
            
            let group=tr.dataset.group;
            let elem=e.target.dataset.elem;

            let result=table.querySelector
            (`tr[data-group="${group}"] input[data-elem="${elem}"].result`);
            let inputs=table.querySelectorAll
            (`tr[data-group="${group}"] input[data-elem="${elem}"].input`);
            
            result.value = [...inputs]
              .map( average )
              .reduce( reducer, 0 )
          }
        };

        document.addEventListener('keyup',keyuphandler);

      </script>
      <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>
       <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' placeholder="input1"/></td>
            <td><input type='text' class='result' 
            data-elem='carbon' readonly placeholder="average" /></td>
          </tr>
          <tr data-group=1>
            <td><input type='text' class='input' 
            data-elem='carbon' placeholder="input2" /></td>
            <td colspan=2> </td>
          </tr>
        </body>
      </table>
</html>

Posted 9-Aug-23 11:09am

Ndambakuwa Mabarira

Updated 10-Aug-23 6:27am

Deeksha Shenoy

v3

Add a Solution

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)

Andre Oosthuizen · Accepted Answer · 2023-08-09T22:02:00

You need to modify your JavaScript to handle the Alert. I added a new condition inside your keyuphandler function to check if the current input elements belong to the carbon group and if the group is 1. If this condition is met, it calculates the difference between input1 and input2 and displays an alert if the difference is greater than 0.3 -

HTML

<!DOCTYPE html>
<html>
<head>
    <title>calculate</title>
</head>
<script>
    const reducer = (a, c) => a + c;
    const average = (n) => parseFloat(n.value) / 2 || 0;

    const keyuphandler = (e) => {
        if (e.target instanceof HTMLInputElement && e.target.type == 'text') {

            let table = e.target.closest('table');
            let tr = e.target.closest('tr');

            let group = tr.dataset.group;
            let elem = e.target.dataset.elem;

            let result = table.querySelector
            (`tr[data-group="${group}"] input[data-elem="${elem}"].result`);
            let inputs = table.querySelectorAll
            (`tr[data-group="${group}"] input[data-elem="${elem}"].input`);

            // Calculate the average
            result.value = [...inputs]
                .map(average)
                .reduce(reducer, 0);

            // Check if the difference between input1 and input2 
            // is greater than 0.3
            if (elem === 'carbon' && group === '1') {
                const input1 = parseFloat(inputs[0].value);
                const input2 = parseFloat(inputs[1].value);
                const difference = Math.abs(input1 - input2);
                if (difference > 0.3) {
                    alert("NOT REPEATABLE.");
                }
            }
        }
    };

    document.addEventListener('keyup', keyuphandler);
</script>
<style>
    /* ... (unchanged styling) ... */
</style>
<body>
    <table>
        <!-- ... (unchanged table structure) ... -->
    </table>
</body>
</html>

Your issue with using this inside the keyuphandler is that an alert will popup everytime a key is pressed until the full value has been entered. Not what you want. I have added the event to a button click, probably also not what you want, you need to change the code to do exactly what you require, this will point you in the right direction though:

JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>calculate</title>
</head>
<script>
    const reducer = (a, c) => a + c;
    const average = (n) => parseFloat(n.value) / 2 || 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');

        // Calculate the average
        result.value = average(table.querySelector('tr[data-group="1"] 
        input[data-elem="carbon"][data-input="1"]'));

        // Check if the difference between input1 and input2 
        // is greater than 0.3
        const difference = Math.abs(input1 - input2);
        if (difference > 0.3) {
            alert("NOT REPEATABLE.");
        }
    };
</script>
<style>
    /* ... (unchanged styling) ... */
</style>
<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="result" 
            data-elem="carbon" readonly placeholder="average" /></td>
        </tr>
        <tr data-group="1">
            <td><input type="text" class="input" 
            data-elem="carbon" data-input="2" placeholder="input2" /></td>
            <td colspan="2"> </td>
        </tr>
    </table>
    <button onclick="calculateAndCheckDifference()">Calculate and Check</button>
</body>
</html>

You can see a working fiddle on both:

On using keypress - Keyuphandler [^]
On using a button element - Using a button to calculate [^]