Output text changes based on two drop down menus

Question

So basically I am trying to make a page where the user can select options from two drop down menus, when the second drop down menu has been completed and both have options in them I want it to trigger some javascript that takes those values and then returns text depending on the output.

Eg a user selects xbox and comfort trade, the price is returned as £5, or maybe they select playstation and comfort trade, the price is returned as £2.50, or maybe they want pc and player auction the price is only £0.99.

HTML

<select id="platform" name="platform">
    <option select value=""></option>
    <option value="xbox">Xbox</option>
    <option value="playstation">PlayStation</option>
    <option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onChange="price()">
    <option selected value=""></option>
    <option value="comfortTrade">Comfort Trade</option>
    <option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>

Javascript

function price() {
    if ($(document.getElementById("platform")) === "xbox" && $(document.getElementById("method")) === "comfortTrade") {
        document.getElementById("price").innerHTML = "£5";
    } else if ($(document.getElementById("platform")) === "playstation" && $(document.getElementById("method")) === "comfortTrade") {
        document.getElementById("price").innerHTML = "£2.50";
    }
}

I'm quite new to Javascript but I had a go at doing this, I also have spent the past hour or so trying to search for tutorials on this but nothing got it to work.

Answer 1

A couple things need to be updated in the existing code to get this to work:

1) onchange has no capital letters, and needs to be added to "platform" <select> as well

2) no need for $ here, can simply use document.getElementById

3) after selecting the element in step 2, will need to get the value of the select by accessing the property .value on the element.

Fixed code:

<div id="app">
  <select id="platform" name="platform" onchange="price()">
    <option select value=""></option>
    <option value="xbox">Xbox</option>
    <option value="playstation">PlayStation</option>
    <option value="pc">PC</option>
  </select><br>
  <p>Select Method:</p>
  <select id="method" name="method" onchange="price()">
    <option selected value=""></option>
    <option value="comfortTrade">Comfort Trade</option>
    <option value="playerAuction">Player Auction</option>
  </select><br>
  <h3 id="price"></h3>
</div>

<script>
  function price() {
    if(document.getElementById("platform").value === "xbox" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
    } else if(document.getElementById("platform").value === "playstation" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
    } 
  }
</script>

Answer 2

Try with this javascript function:

function price() {
    if (document.getElementById("platform").value == "xbox" && document.getElementById("method").value == "comfortTrade") {
        document.getElementById("price").innerHTML = "£5";
    } else if (document.getElementById("platform").value == "playstation" && document.getElementById("method").value == "comfortTrade") {
        document.getElementById("price").innerHTML = "£2.50";
    }
}

Answer 3

Presuming you have jQuery installed because you are using $(...) in your code, you can solve your issue like this:

    <select id="platform" name="platform" onchange="findPrice()">
        <option select value=""></option>
        <option value="xbox">Xbox</option>
        <option value="playstation">PlayStation</option>
        <option value="pc">PC</option>
    </select><br>
    <p>Select Method:</p>
    <select id="method" name="method" onchange="findPrice()">
        <option selected value=""></option>
        <option value="comfortTrade">Comfort Trade</option>
        <option value="playerAuction">Player Auction</option>
    </select><br>
    <h3 id="price"></h3>
<script type="application/javascript">
window.findPrice = function() {
    if($("#platform").val() === "xbox" && $("#method").val() === "comfortTrade") {
    document.getElementById("price").innerHTML = "£5";
    }else if($("#platform").val() === "playstation" && $("#method").val() === "comfortTrade") {
    document.getElementById("price").innerHTML = "£2.50";
    }
}
</script>

You can see a working example of this at: https://jsfiddle.net/L2vgqmtL/

---

However, I would actually propose a slightly different solution that I find more elegant:

<script type="application/javascript">
window.findPrice = function() {
  var platform = $("#platform").val();
  var method = $("#method").val();
  var priceUpdateText = "";
    if(method == 'comfortTrade'){
    switch(platform){
        case "xbox":
        priceUpdateText = "£5";
        break;
      case "playstation":
        priceUpdateText = "£2.50";
        break;
      default:
        priceUpdateText = "";
    }
  }
  $("#price").text(priceUpdateText);
}
</script>
            <select id="platform" name="platform" onchange="findPrice()">
        <option select value=""></option>
        <option value="xbox">Xbox</option>
        <option value="playstation">PlayStation</option>
        <option value="pc">PC</option>
    </select><br>
    <p>Select Method:</p>
    <select id="method" name="method" onchange="findPrice()">
        <option selected value=""></option>
        <option value="comfortTrade">Comfort Trade</option>
        <option value="playerAuction">Player Auction</option>
    </select><br>
    <h3 id="price"></h3>

A working example of this solution is available here: https://jsfiddle.net/8wafskbw/2/

Important Note: Both of these solutions operate under the presumption that have jQuery included in your page.