JSFiddle - React, Tailwind, and code Playground

by Mobeen Sarwar

HTML

<table style="width:90%">
                <tr>
                    <th>&nbsp;</th>
                    <th>Type</th>
                    <th>Quantity</th>
                </tr>
                <tr>
                    <td><img src="Image/chicken_chop.png" style="height: 100px; width: 200px"/></td>
                    <td style="text-align: center">Black Pepper Sauce</td>
                    <td style="text-align: center"><p id="Amount_bp" onchange="autoCal(this.value)">0</p></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td><input class="w3-input w3-border" name="tot_amount" id="total" type="text" readonly/></td>
                </tr>
            </table>

JavaScript

document.getElementById("Amount_bp").innerHTML = '10';
function autoCal(val) {
    var tot_price = val * 14.9;
    /*display the result*/
    var divobj = document.getElementById('total');
    divobj.value = tot_price;
}