Doing Calculations with multiple options in Javascript

Question

I'm quite new to Javascript and have started to do simple calculations, but have run into a barrier with <select>.

I want the code to get what the user has selected in the drop-down menu and multiply the number in the "How many nights?" box. The answer will be displayed in the textbox below. The options in the select menu all have prices tied to them.

< script language = "javascript" >
  function calculate() {
    var val1 = parseInt(document.getElementById("Nights").value);
    var val1 = parseInt(document.getElementById("House").value);
    var House1 = 100;
    var House2 = 175;
    var House3 = 150;
    var House4 = 135;
    var House5 = 150;
    var House6 = 120;
    var House7 = 180;
    var House8 = 120;
    var House9 = 80;
    var House10 = 105;

    var ansD = document.getElementById("answer");
    ansD.value = House * Nights;
  }
} < /script>

<html>

<head>
  <title>Calculate cost</title>



</head>

<body>
  <select required class="textfield" name="House" id="House">
    <option value="">None</option>
    <option value="House1">House 1</option>
    <option value="House2">House 2</option>
    <option value="House3">House 3</option>
    <option value="House4">House 4</option>
    <option value="House5">House 5</option>
    <option value="House6">House 6</option>
    <option value="House7">House 7</option>
    <option value="House8">House 8</option>
    <option value="House9">House 9</option>
    <option value="House10">House 10</option>
  </select>
  <br />
  <br />How many nights?
  <input type="text" id="Nights" name="Nights" value="1" />

  <input type="button" name="Submit" value="Cost" onclick="javascript:addNumbers()" />
  <br />
  <br />Your stay will cost £
  <input type="text" id="answer" name="answer" value="" />
</body>

</html>

`addnumbers()` should be replaced by `calculate`, `val1` occures 2 times, use `map`: http://stackoverflow.com/questions/6298169/how-to-create-a-map-object-in-javascript — John_West, Jan 04 '16 at 23:44
make it yourself a bit easier, and represent the value of the option as the actual cost per night, might be lots more flexible in the future. So `` ... You could then read the price from the option that got selected and simply multiply it with the parseInt value of your Nights textbox — Icepickle, Jan 04 '16 at 23:45

score 1 · Accepted Answer · answered Jan 04 '16 at 23:56

With setting the value for the houses inside the select dropdown, you help yourself quite a lot. You can see that the javascript part is greatly reduced, and that it is actually quite simple to sum the values together

Also, it is important that your button is not of type submit, as it would then submit your script, and well, you don't see the result of your calculate function then ;)

function calculate() {
  var houseEl = document.getElementById('houseType'),
      nightEl = document.getElementById('nightsCount'),
      resultEl = document.getElementById('result');
  
  if (houseEl.selectedIndex < 0 || parseInt(nightEl.value) < 0) {
    resultEl.innerHTML = 'n/a';
    return;
  }
  resultEl.innerHTML = parseInt(houseEl.options[houseEl.selectedIndex].value) * parseInt(nightEl.value);
}

window.addEventListener('load', function() {
  document.getElementById('btnCalculate').addEventListener('click', calculate);
});

<select id="houseType">
  <option value="0">None</option>
  <option value="100">House 1</option>
  <option value="150">House 2</option>
</select>
<input type="number" min="1" value="1" id="nightsCount" />
<button type="button" id="btnCalculate">Calculate</button>
<div>
  The total amount for your stay would be <span id="result"></span> €
</div>

Thanks! This has definitely helped me, but putting the Javascript into an external file is causing problems. I am currently using this code to link it. ` — John Field81, Jan 05 '16 at 15:14
@JohnField81 I am happy this has helped you, but could you give me some more info on what the error is that you are getting (is something mentioned in the console, or do you get an error loading the file)? — Icepickle, Jan 05 '16 at 15:19

John_West · Answer 2 · 2016-01-05T00:10:31.247

I suggest you to use an Object that keeps "key"-"value" pairs.

a is an Object, it contains keys such as House1, House2 and prices as values. a[val2] will give you a price for staying one night in the hotel.

if None value (or other not available in the Map value) comes from the form, isNaN() check will give true and No price message will be printed out.

<html>
<head>
  <title>Calculate cost</title>

<script language = "javascript">
  function calculate() {
    var val1 = parseInt(document.getElementById("Nights").value);
    var val2 = document.getElementById("House").value;
    var a={};
    var prices = [ 100, 175, 150, 135, 150, 120, 180, 120, 80, 105 ];
    for (var i = 1; i < 11; i++)
    {
     a["House"+i] = prices[i];
    }

    var ansD = document.getElementById("answer");
    if (isNaN(a[val2]))
      ansD.value="No price!";
    else
      ansD.value = val1 * a[val2];
  }
</script>

</head>

<body>
  <select required class="textfield" name="House" id="House">
    <option value="">None</option>
    <option value="House1">House 1</option>
    <option value="House2">House 2</option>
    <option value="House3">House 3</option>
    <option value="House4">House 4</option>
    <option value="House5">House 5</option>
    <option value="House6">House 6</option>
    <option value="House7">House 7</option>
    <option value="House8">House 8</option>
    <option value="House9">House 9</option>
    <option value="House10">House 10</option>
  </select>
  <br />
  <br />How many nights?
  <input type="text" id="Nights" name="Nights" value="1" />

  <input type="button" name="Submit" value="Cost" onclick="calculate()" />
  <br />
  <br />Your stay will cost £
  <input type="text" id="answer" name="answer" value="" />
</body>

</html>

Doing Calculations with multiple options in Javascript

2 Answers2