How to use javascript to change HTML after performing an arithmetic operation?-CodePudding

What I am wanting to do is have a value from a dropdown list after selecting a product and a value from another dropdown list after selecting a region. It would add these two numeric values and present a text like "The total cost is $price" (instead of price it would say the number). I have been able to use changehtml to write "The cost of this item is $price" and "The shipping fee is $price" using two separate dropdown boxes, but I can't figure out how to combine the performOp and changehtml commands. This is the closest I have gotten to a successful try, but as you can tell, it still doesn't work since I don't know how to mix performOp and 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" ></p>
        <h4 >Select a region</h4>
        <select  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" ></p>
        <h4 >Calculate the total cost</h4>
        <button  type="button" onclick="changehtml()">Calculate</button>
        <p id="output" ></p>

CodePudding user response：

<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" ></p>
<h4 >Select a region</h4>
<select  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" ></p>
<h4 >Calculate the total cost</h4>
<button  type="button" onclick="changehtml()">Calculate</button>
<p id="output" ></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>