Как изменить расчёт на основе раскрывающегося списка?

Question

Отказ от ответственности за возможное незнание вопроса - Я супер супер зеленый при кодировании Javascript, и я ищу дружеский совет.

Я ищу код очень простой калькулятор для веб-сайта. Этот калькулятор разрабатывает очень простой расчет для требований к теплоотдаче для комнаты в зависимости от размера. Но я хочу, чтобы вычисление слегка изменилось в зависимости от выбранного пользователем параметра раскрывающегося списка, а именно, если пользователь хочет ввести в метрах или футах.

Кодекса (в настоящее время) следующим образом:

function Calculate() { 
 
     var a = document.getElementById("height").value; 
 
     var b = document.getElementById("width").value; 
 
     var c = document.getElementById("depth").value; 
 
     var d = +a * +b * +c/14; 
 
     var x = d.toFixed(2); 
 
     document.getElementById("result").innerHTML = x; 
 
    }

<form style="width:100px;" name="myForm"> 
 
    <td> 
 
    <td>Units:</td> 
 
    <td> 
 
     <Select name="units"> 
 
     <option>Metres</option> 
 
     <option>Feet</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</form> 
 

 
<form> 
 
    <table> 
 
    <tr> 
 
     <td style="padding-right:10px;">Height:</td> 
 
     <td> 
 
     <input style="width:100px;" type="text" name="Height" id="height"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="padding-right:10px;">Width:</td> 
 
     <td> 
 
     <input style="width:100px;" type="text" name="Width" id="width"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="padding-right:10px;">Depth:</td> 
 
     <td> 
 
     <input style="width:100px;" type="text" name="Depth" id="depth"> 
 
     </td> 
 
    </tr> 
 
    <br> 
 

 
    <tr> 
 
     <td style="padding-right:10px;"> 
 
     <input type="button" onclick="Calculate()" value="Calculate" /> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td style="padding-right:10px;">Heat output required in kW:</td> 
 
     <td> 
 
     <p id="result"></p> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

Я в основном ищу выпадающий список, чтобы изменить расчет в «вара д» из указанного расчета на ((+a * +b * +c) *0.03) /14

Это так просто. Я читал разные темы, но они не все объясняют, что мне нужно.

Любая помощь здесь будет принята с благодарностью.

Answer 1

Я бы дал ваш выбор id, затем запросите свой выбор и получите текст выбранного варианта. Если это «Метры» сделать это один из способов иначе сделать это по-другому, например, так:

function Calculate() { 
 
    var s = document.getElementById("units"); 
 
    var measure = s.options[s.selectedIndex].text; 
 
    
 
    var a = document.getElementById("height").value; 
 
    var b = document.getElementById("width").value; 
 
    var c = document.getElementById("depth").value; 
 
    var d; 
 
    if(measure=="Metres") 
 
    d = +a * +b * +c/14; 
 
    else 
 
    d = ((+a * +b * +c) *0.03) /14; 
 
    var x = d.toFixed(2); 
 
    document.getElementById("result").innerHTML = x; 
 
}

<form style="width:100px;" name="myForm"> 
 
    <td> 
 
    <td>Units:</td> 
 
    <td> 
 
     <Select name="units" id="units"> 
 
     <option>Metres</option> 
 
     <option>Feet</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</form> 
 

 
<form> 
 
    <table> 
 
    <tr> 
 
     <td style="padding-right:10px;">Height:</td> 
 
     <td> 
 
     <input style="width:100px;" type="text" name="Height" id="height"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="padding-right:10px;">Width:</td> 
 
     <td> 
 
     <input style="width:100px;" type="text" name="Width" id="width"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="padding-right:10px;">Depth:</td> 
 
     <td> 
 
     <input style="width:100px;" type="text" name="Depth" id="depth"> 
 
     </td> 
 
    </tr> 
 
    <br> 
 

 
    <tr> 
 
     <td style="padding-right:10px;"> 
 
     <input type="button" onclick="Calculate()" value="Calculate" /> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td style="padding-right:10px;">Heat output required in kW:</td> 
 
     <td> 
 
     <p id="result"></p> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>