執行算術運算后如何使用 javascript 更改 HTML？

Question

我想要做的是在選擇產品后從下拉列表中獲取值，在選擇區域后從另一個下拉列表中獲取值。 它將添加這兩個數值並顯示類似“總成本為 $price”的文本（而不是價格，它會顯示數字）。 我已經能夠使用 changehtml 使用兩個單獨的下拉框編寫“該商品的成本為 $price”和“運費為 $price”，但我不知道如何組合 performOp 和 changehtml 命令。 這是我最接近成功嘗試的一次，但正如你所知，它仍然不起作用，因為我不知道如何混合 performOp 和 changehtml。

 function total(ele) { document.getElementById("selected_option").innerText = "Your package costs $" + ele.value + "."; } function total2(ele) { document.getElementById("regionSelect").innerText = "The shipping fee is $" + ele.value + "."; } function changehtml() { var p = document.getElementById("selected_option").value; var s = document.getElementById("regionSelect").value; var changedP = +p + s; document.getElementById("output").innerText = "The total cost is $" + changedP; }

 <h3>Select an item</h3> <select name="Package" onclick="total(this)"> <option value="" disabled selected>Select an item</option> <option value=20.00>Lavender Oil</option> <option value=24.00>Eucalyptus Oil</option> <option value=23.00>Peppermint Oil</option> <option value=19.00>Jasmine Oil</option> </select> <p id="selected_option" class="margin"></p> <h4 class="margin">Select a region</h4> <select class="margin" name="Package" onclick="total2(this)"> <option value="" disabled selected>Select a region</option> <option value="11.20">West Coast</option> <option value=17.00>East Coast</option> </select> <p id="regionSelect" class="margin"></p> <h4 class="margin">Calculate the total cost</h4> <button class="margin" type="button" onclick="changehtml()">Calculate</button> <p id="output" class="margin"></p>

Answer 1

<h3>Select an item</h3>
<select name="Package" onclick="total(this)">
    <option value="" disabled selected>Select an item</option>
    <option value=20.00>Lavender Oil</option>
    <option value=24.00>Eucalyptus Oil</option>
    <option value=23.00>Peppermint Oil</option>
    <option value=19.00>Jasmine Oil</option>
</select>
<p id="selected_option" class="margin"></p>
<h4 class="margin">Select a region</h4>
<select class="margin" name="Package" onclick="total2(this)">
    <option value="" disabled selected>Select a region</option>
    <option value="11.20">West Coast</option>
    <option value=17.00>East Coast</option>
</select>
<p id="regionSelect" class="margin"></p>
<h4 class="margin">Calculate the total cost</h4>
<button class="margin" type="button" onclick="changehtml()">Calculate</button>
<p id="output" class="margin"></p>
<script>
  var selected_option ;
  var regionSelect;

  function total(ele) {
    document.getElementById("selected_option").innerHTML = "Your package costs $" + ele.value + ".";
    selected_option= ele.value;
}

function total2(ele) {
    document.getElementById("regionSelect").innerHTML = "The shipping fee is $" + ele.value + ".";
    regionSelect = ele.value;
}

function changehtml() {
    var changedP = parseInt(selected_option)+parseInt(regionSelect);
    document.getElementById("output").innerHTML= "The total cost is $" + changedP;
}
</script>