JSFiddle - React, Tailwind, and code Playground

HTML

<table id=table_price cellspacing=5 cellpadding=5>
    <tr>
        <th>материал</th>
        <th>кг/м3</th>
        <th>руб./м3</th>
    </tr>
    <tr>
        <td>Песок</td>
        <td>1300</td>
        <td>300</td>
    </tr>
    <tr>
        <td>Гравий</td>
        <td>1400</td>
        <td>700</td>
    </tr>
    <tr>
        <td>Щебень</td>
        <td>1600</td>
        <td>1100</td>
    </tr>
</table>

<form onsubmit="return false;" oninput="getResult()">
    <select size=1 id=product>
        <option value="p">Песок</option>
        <option value="g">Гравий</option>
        <option value="c">Щебень</option>
    </select>кол-во:
    <input id="count" type="number" value=0 min=1 >
    <select size=1 id="measure">
        <option value=1>м3</option>
        <option value=2>кг</option>
    </select>цена
        <output id="reuslt"></output>руб.
</form>

JavaScript

function getResult()
{
    var table = { "p" : { 
                        price: 300,
                        density: 1300 },
                 "g" : { 
                        price: 700,
                        density: 1400 },
                 "c" : { 
                        price: 1100,
                        density: 1600 }
                };
    var res = 0;
    if (measure.value == 1) {  
        res = table[product.value].price * count.value;
    }
    else if (measure.value == 2) {
        res = count.value / table[product.value].density * table[product.value].price;
    }
    reuslt.innerHTML = res;    
}