mercredi 22 août 2018

Linking 2 comboxes values to a If statement

Im creating small html page that calculates the price of a phone call depending on the city you select from the combobox(First combo is the city from where youre calling and the other one are the cities youre calling to).

Now for some reason the console indicates that the result variable in the last line isnt declared.

Also I trying to find a simpler way to substitute the IF Statements( I tried doing it with the switch/case)

PD: Also for some reason the Ok button opens the Printer Option from Chrome.

The calculator function

function PriceCalc() {
  var time = Number(document.getElementById("time").value);
  var caller = Number(document.getElementById("Caller").value);
  var receiver = Number(document.getElementById("Receiver").value);
  var result = 0;

  if (caller == "1" && receiver == "6") {
    result = time * 1.90;
  } else if (caller == "1" && receiver == "7") {
    result = time * 2.90;

  } else if (caller == "1" && receiver == "8") {
    result = time * 1.65;

  } else if (caller == "2" && receiver == "5") {
    result = time * 2.70;

  } else if (caller == "3" && receiver == "1") {
    result = time * 2.75;


  }
  document.getElementById("result").innerHTML = " = " + result;

HTML:
<!DOCTYPE html>
<html>



<head>
  <title></title>
  <script type="text/javascript" src="telzir.js"></script>
  <link href="telzir.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="centre">
    <h1>Price Calculator</h1>
    <form>
      <input id="time" placeholder="Minutes Spended">

      <select id="Caller">
        <option value="1">São Paulo</option>
        <option value="2">Ribeirão Preto</option>
        <option value="3">São José dos Campos</option>
        <option value="4">Presidente Prudente</option>
      </select>

      <select id="Receiver">
        <option value="5">São Paulo</option>
        <option value="6">Ribeirão Preto</option>
        <option value="7">São José dos Campos</option>
        <option value="8">Presidente Prudente</option>
      </select>
      <input id="name " type="button" value="Ok" onclick= "PriceCalc()">

      <input id="reset" type="reset" value="Reset" />

    </form>
    <h1 id="result"> = </h1>
  </div>

</body>


</html>

Aucun commentaire:

Enregistrer un commentaire