расчет цены с двумя значениями

Question

Итак, у меня есть что-то вроде этого ...

У меня есть форма, где вы выбираете свой пол и вводите свой вес.каждый пол имеет разные диапазоны цен, например, если ваш мужчина и ваш вес больше 200, ваша цена равна 20, если ваша женщина и ваш вес больше 200, ваша цена равна 15, и если ваш мужчина и ваш вес меньшечем 200 ваша цена равна 10, для женщины, если ее вес меньше 200, ее цена равна 7.Я пытался сделать это возможным с jquery и PHP, но кажется, что он работает только с опцией выбора и не будет работать с входными данными.

это мой index.php

   <div class="container">

      <div class="row">
       <div class="col-xs-3 col-xs-offset-2">
        <h3>gender:</h3>
        <!-- select gender -->
         <select class="form-control" id="gender">
         <option>female</option>
        <option>male</option>
         </select>
        </div>
       <div class="col-xs-3">
         <h3>weight </h3>
          <!-- input weight -->
       <input type="" name="weight" id="weight">
        </div>

         </div>
      <div id="ticketInfo">
        <h3 id="yourTicket">No gender Selected</h3>
     </div>
     </div>
    <script src="js/jquery-1.12.2.js"></script>
   <script src="js/bootstrap.js"></script>
     <script src="js/scripts.js"></script>

это мой скрипт

  function Ticket(gender, weight) {
  this.gender=gender;
  this.weight=weight;

     }

   Ticket.prototype.getPrice=function() {
     var price;

   if((this.gender==="male ")||(this.weight=>"200 ")){
       price=20;
        }
    if((this.gender==="female ")||(this.weight=>"200 ")) {
      price=15;
     }
     if((this.gender==="male ")||(this.weight=<"200 ")) {
    price=10;
    }
   if((this.gender==="female ")||(this.weight=<"200 ")) {
    price=7;
   }

  return price;
 }



$("select").change(function() {
  var genderOptions=[];
  $("select option:selected").each(function() {
   genderOptions.push($(this).text() + " ");
 });
 var newTicket = new 
 Ticket(genderOptions[0],genderOptions[1],genderOptions[2]);
 $("#yourTicket").text(newTicket.gender + newTicket.weight + " $" + 
 newTicket.getPrice().toFixed(2));
   });

в конце в попытке умножить цену на вес.любая помощь будет очень признательна, спасибо заранее.

Answer 1

Попробуйте это с помощью решения Syed.

Логика должна использовать оператор &&, а не ||

    function Ticket(gender, weight) {
        this.gender=gender;
      this.weight=weight;
    }

    Ticket.prototype.getPrice=function() {
      var price;
      if(this.gender==="male" && this.weight > 200){
    price=20;
  }
  else if(this.gender==="female" && this.weight > 200) {
    price=15;
  }
  else if(this.gender==="male" && this.weight <= 200) {
    price=10;
  }
  else if(this.gender==="female" && this.weight <= 200) {
    price=7;

      }
      return price;
    }

    $("#calculate").click(function() {
        var genderOptions=[];
        $("select option:selected").each(function() {
            genderOptions.push($(this).text() + " ");
        });

        var newTicket = new 
        Ticket($("#gender").val(),$('#weight').val());
        var multiplyVal = newTicket.weight * newTicket.getPrice();
        $("#yourTicket").text("Gender: " + newTicket.gender + " Weight: " + newTicket.weight + " $" + newTicket.getPrice().toFixed(2) + " and your multiplied value is " + multiplyVal);
    });

<div class="col-xs-3 col-xs-offset-2">
  <h3>gender:</h3>
  <!-- select gender -->
  <select class="form-control" id="gender"> 
    <option value="female" selected>female</option>
    <option value="male">male</option>
  </select>
</div>
<div class="col-xs-3">
  <h3>weight </h3>
  <!-- input weight -->
  <input type="" name="weight" id="weight">
</div>
<div id="ticketInfo">
  <h3 id="yourTicket">No gender Selected</h3>
</div>
<button id="calculate" >Calculate</button>

Answer 2

Удалите пустую строку, добавленную в пол options.push. Впоследствии, нормально работает

genderOptions.push ($ (это) .text ())

Answer 3

Ваш вопрос неясен. Как я понимаю, я предоставлю вам решение.

1. У вас есть ошибки в вашем условии if.напримервам нужно проверить как >=, вместо этого вы отметили как =>, что неправильно.
2. Также это должно быть && вместо ||
3. И вы пропустили передачу переменной веса вTicket class.
4. удаляйте кавычки около 200 в вашем условии if
5. вы вставили пробел в genderOptions.поэтому я удалил его.

Я исправил эти проблемы.

function Ticket(gender, weight) {
  this.gender=gender;
  this.weight=weight;
}

Ticket.prototype.getPrice=function() {
  var price;
  if(this.gender==="male" && this.weight > 200 ){
    price=20;
  }
  else if(this.gender==="female" && this.weight > 200 ) {
    price=15;
  }
  else if(this.gender==="male" && this.weight <= 200 ) {
    price=10;
  }
  else if(this.gender==="female" && this.weight <= 200 ) {
    price=7;
  }
  return price;
}



$("select").change(function() {
  var genderOptions=[];
  $("select option:selected").each(function() {
    genderOptions.push($(this).text());
  });

  var newTicket = new Ticket(genderOptions[0] , $('#weight').val());
  var multiplyVal = newTicket.weight * newTicket.getPrice();
  $("#yourTicket").text(newTicket.gender + newTicket.weight + " $" + newTicket.getPrice().toFixed(2) + " and your multiplied value is " + multiplyVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <div class="row">
       <div class="col-xs-3 col-xs-offset-2">
        <h3>gender:</h3>
        <!-- select gender -->
         <select class="form-control" id="gender">
         <option value="female">female</option>
        <option value="male">male</option>
         </select>
        </div>
       <div class="col-xs-3">
         <h3>weight </h3>
          <!-- input weight -->
       <input type="" name="weight" id="weight">
        </div>

         </div>
      <div id="ticketInfo">
        <h3 id="yourTicket">No gender Selected</h3>
     </div>
     </div>