CODEWITHSUNDEEP
javascripthtmlhtml-select
John Field81
John Field81

Reputation: 21

Doing Calculations with multiple options in Javascript

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>

Upvotes: 1

Views: 207

Answers (2)

John_West
John_West

Reputation: 2399

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>

Upvotes: 0

Icepickle
Icepickle

Reputation: 12806

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>

Upvotes: 1

Related Questions