1

In my program, I have two select elements that allows a user to select a certain phone and phone accessory that they can buy 

<label for="choose-phone">Choose phone to buy: </label>
<select id="choose-phone">
  <option value=""></option>
  <option selected="selected" id="phone1" value="iPhone X">iPhone X -- $800.00</option>
  <option id="phone2" value="Samsung Galaxy s9">Samsung Galaxy s9 -- $550.00</option>
  <option id="phone3" value="Microsoft Lumia 950 XL">Microsoft Lumia 950 XL -- $70.00</option>
</select>

  <label for="choose-accessory">Choose accessory to buy: </label>
<select id="choose-accessory">
  <option value=""></option>
  <option selected="selected" id="accessory1" value="Phone case">Phone case -- $35.00</option>
  <option id="accessory2" value="Headphones">Headphones -- $20.00</option>
  <option id="accessory3" value="Screen Protector">Screen Protector -- $19.99</option>
  <option id="accessory4" value="Star Trek(™) Bluetooth Communicator">Star Trek(™) Bluetooth Communicator -- $150.00 </option>
</select>

I basically want the user to select whatever phone and accessory they want. A function called confirmPurchase calculates the costs of both items and includes the tax rate:

function confirmPurchase() {
currentBalance;
//phoneAndAccessory is a temporary variable 
let phoneAndAccessory = iphonePrice + casePrice;
taxedTotal = (phoneAndAccessory * taxRate) + phoneAndAccessory;
paraForCost.innerHTML = "The total cost for " + phone1 + " and " + 
accessory1 + " is $" + taxedTotal;
updateBalance()
}

Right now the default options are the iPhone X and phone case but I don't know how to select different phones and accessories and use their respective prices. I thought of doing a function called function choosePhone() { //possible switch statement to select phone } and I've also thought about accessing the index from each select element and using them to get these price variables:

const iphonePrice = 800.00;
const samsungPrice = 550.00;
const microsoftPrice = 70.00;

const casePrice = 35.00;
const headphonesPrice = 20.00;
const protectorPrice = 19.99;
const communicatorPrice = 150.00;

Again, the default options as of right now are the iPhone and the phone case so the purchase function uses both the iphonePrice variable and the casePrice variable.

Improve this question
1
  • So are you trying to modify the accessory list based on the selected phone? There are plenty of duplicates for that. Commented Mar 21, 2018 at 23:52

1 Answer 1

Reset to default
1

You need to set some onchange handlers for your select. Then you can add some custome data attributes to your elements for price and use those in your helper methods. I'll leave the rest of your business logic to you, but this should answer your question.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <label for="choose-phone">Choose phone to buy: </label>
  <select id="choose-phone" onchange="setPrice(this, 'phone')">
    <option value=""></option>
    <option selected="selected" id="phone1" value="iPhone X" data-price="800">iPhone X -- $800.00</option>
    <option id="phone2" value="Samsung Galaxy s9" data-price="550">Samsung Galaxy s9 -- $550.00</option>
    <option id="phone3" value="Microsoft Lumia 950 XL"  data-price="70">Microsoft Lumia 950 XL -- $70.00</option>
  </select>

    <label for="choose-accessory">Choose accessory to buy: </label>
  <select id="choose-accessory" onchange="setPrice(this, 'accessory')">
    <option value=""></option>
    <option selected="selected" id="accessory1" value="Phone case" data-price="35">Phone case -- $35.00</option>
    <option id="accessory2" value="Headphones" data-price="20">Headphones -- $20.00</option>
    <option id="accessory3" value="Screen Protector" data-price="19.99">Screen Protector -- $19.99</option>
    <option id="accessory4" value="Star Trek(™) Bluetooth Communicator" data-price="150">Star Trek(™) Bluetooth Communicator -- $150.00 </option>
  </select>
  <button onclick="confirmPurchase()">
    BUY
  </button>
</body>
</html>

JS

var accessoryPrice = 35;
var phonePrice = 800;

function setPrice(el, source) {
    var option = el.options[el.selectedIndex];
    var price = option.getAttribute('data-price');

  if (source === 'phone') {
    phonePrice = parseFloat(price ? price : 0);
  } else if (source === 'accessory') {
    accessoryPrice = parseFloat(price ? price : 0);
  }
}

function confirmPurchase() {
    var total = phonePrice + accessoryPrice;
  alert(total);
}

JSFiddle https://jsfiddle.net/9bpvc4uy/16/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Consider posting as a runnable snippet here, links rot. Also means you can post just the body content and drop the doctype, head, etc. ;-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.