CODEWITHSUNDEEP
javascript
user3784458
user3784458

Reputation: 116

Javascript to change price value on webpage with HTML option menu

I have an HTML page with an option dropdown menu. Upon the user selecting a new option in the dropdown menu, the price display on the page is to change. However, the newly displayed price is a hard integer rather than a number with 2 decimal places following it.

I have tried many things with the parseFloat() function as well as the toFixed() function to no avail. 

<script>

var origPrice = 30.00;
var currentPrice = origPrice;
var endPrice = origPrice;
var yesOptionUpCharge = 15;
var yesOptionAdded = false;

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}
function optionChangeFunction(period) {
    if (period=="") {
        return; // please select - possibly you want something else here
    }
    document.getElementById("choiceSelectionDropDown").disabled=true;
    if(period == "noSelected") {
        if(yesOptionAdded == false) {
            endPrice = endPrice;
            return;
        } else if(yesOptionAdded == true) {
            endPrice = endPrice - yesOptionUpCharge;
            yesOptionAdded = false;
        }
    } else if(period == "yesSelected") {
        if(yesOptionAdded == false) {
            endPrice = endPrice + yesOptionUpCharge;
            yesOptionAdded = true;
            alert("endPrice = " + endPrice);
        } else if(yesOptionAdded == true) {
            endPrice = endPrice;
            return;
        }
    } else {
        endPrice = endPrice;
        return;
    }
    if(isFloat(endPrice) == false) {
        alert("inside end function");
        var endPriceString = parseFloat(endPrice).toFixed(2);
        endPrice = parseFloat(endPriceString);
        alert("after end function");
    }
    document.getElementById("choiceSelectionDropDown").disabled=false;
    document.getElementById("price").innerHTML = endPrice; 
    alert("end of function and yesOptionAdded = " + yesOptionAdded + " and endPrice = " + endPrice);
} 
</script>

    <div class="divRow">
        <select style="background-color: black;" onchange="optionChangeFunction(this.value)" id="choiceSelectionDropDown">
            <option value="noSelected">No Option</option>
            <option value="yesSelected">Yes Option</option>
        </select>
    </div>
<div style="margin-bottom:15px;" id="price"></div>

What I'd like to happen is the price update with each function of the drop down menu, and also have the two floating decimals behind said price. That is, if the starting prices both have ".00" values. Id like to select the "yes" option and the price goes to 45, and the "No" option would take the price back down to 30. I would like the price to add and subtract as there is a possibility of other price changing options on a given page.

Upvotes: 0

Views: 2073

Answers (1)

Jon B
Jon B

Reputation: 2834

I have refactored slightly as there was some redundant code in your example but this code works fine.

var origPrice = 30.00;
var endPrice = '';
var yesOptionUpCharge = 15;
var yesOptionAdded = false;

function optionChangeFunction(period) {
    if (period === "") {
        return; // please select - possibly you want something else here
    }
    if(period === "noSelected") {
      if (yesOptionAdded === false) {
        endPrice = origPrice;
      } else if (yesOptionAdded === true) {
        endPrice = origPrice - yesOptionUpCharge;
        yesOptionAdded = false;
      }
    } else if (period === "yesSelected") {
        if (yesOptionAdded === false) {
            endPrice = origPrice + yesOptionUpCharge;
            yesOptionAdded = true;
        } else if (yesOptionAdded === true) {
          endPrice = origPrice
        }
    }
    endPrice = endPrice.toFixed(2);
    document.getElementById("price").innerHTML = endPrice; 
}
<div class="divRow">
  <select onchange="optionChangeFunction(this.value)" id="choiceSelectionDropDown">
    <option value="">Select</option>
    <option value="noSelected">No Option</option>
    <option value="yesSelected">Yes Option</option>
  </select>
</div>
<div style="margin-bottom:15px;" id="price"></div>

Upvotes: 1

Related Questions