CODEWITHSUNDEEP
javascripthtml
Rhinestone34223
Rhinestone34223

Reputation: 29

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

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" 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>

Upvotes: 0

Views: 38

Answers (1)

Rahul Mohanty
Rahul Mohanty

Reputation: 342

<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>

Upvotes: 1

Related Questions