jQuery Калькулятор цен

Question

Я пытаюсь выяснить, где я ошибся. Цель состоит в том, чтобы иметь тип потребителя в количестве квадратных футов, которые им необходимы для проекта напольного покрытия, и он выводил бы, сколько их общая цена будет основана на установленных переменных. У меня есть записанный код, но он не проходит через все операторы if else.

    $(document).ready(function() {
    
        // variables
        var firstCase = 60;
        var results = 0;
        var casePrice = 38.17;
        var shares = $("#shares").val();
    
    
        // clear on load
        $("#result").empty();
    
    $("#calculate").on("click", function() {
        if (shares < firstCase) {
            results = casePrice;
        }
    
        else if (shares === firstCase) {
            results = casePrice;
        }
    
        else if (shares <= firstCase * 2 ) {
            results = casePrice * 2;
        }
    
        $("#result").text(results);
    });
    });

/* calculator */
.shares {
  max-width: 500px;
  line-height: 300%;
}

.sqft-enter {
  margin: 20px 0 0 0;
  font-weight: bold;
  padding-bottom: 5px;
}

.total {
  padding-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator">
    <label class="sqft-enter">Enter square feet:</label><input name="shares" id="shares" type="text"><button onclick="calculate" id="calculate"> Calculate </button>
    <br>
    <div class="total">
    Total Value: $ 
      <span id="result"></span>
    </div>
</div>

Answer 1

Вы не получаете значение shares в нужное время. Вы получаете его один раз, когда страница готова. Это означает, что он не меняет значения, когда вы вводите что-то в input.

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

Кроме того, как указано j08691 , функция val() возвращает строку, если вы sh чтобы сравнить его с числом, нужно разобрать его в число с плавающей точкой.

$(document).ready(function() {
    
        // variables
        var firstCase = 60;
        var results = 0;
        var casePrice = 38.17;
    
    
        // clear on load
        $("#result").empty();
    
    $("#calculate").on("click", function() {
        var shares = parseFloat($("#shares").val());
        if (shares < firstCase) {
            results = casePrice;
        }
    
        else if (shares === firstCase) {
            results = casePrice;
        }
    
        else if (shares <= firstCase * 2 ) {
            results = casePrice * 2;
        }
    
        $("#result").text(results);
    });
    });

/* calculator */
.shares {
  max-width: 500px;
  line-height: 300%;
}

.sqft-enter {
  margin: 20px 0 0 0;
  font-weight: bold;
  padding-bottom: 5px;
}

.total {
  padding-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator">
    <label class="sqft-enter">Enter square feet:</label><input name="shares" id="shares" type="text"><button onclick="calculate" id="calculate"> Calculate </button>
    <br>
    <div class="total">
    Total Value: $ 
      <span id="result"></span>
    </div>
</div>

Answer 2

Существует две проблемы:

1) var shares = $("#shares").val(); необходимо переместить в событие click, в противном случае эта переменная будет всегда содержать значение текстового поля в том виде, в котором оно находилось на момент загрузки страницы. (т. е. пусто) - оно не обновляется автоматически с новым значением, вы должны читать его каждый раз.

2) shares - это строка, когда она приходит из текстового поля. Если вы попытаетесь выполнить математику для строки, вы можете получить неожиданные результаты, поэтому вам нужно проанализировать ее до числа (с плавающей запятой), прежде чем использовать его.

Примечание 1: Первые два оператора if можно объединить в одно с помощью <= (меньше или равно).

Примечание 2: в вашей логике все еще есть дыра c - если shares больше firstCase * 2, то нет Расчет выполнен, потому что вы не определили для этого правила. Вам нужен else чехол, чтобы уловить эту ситуацию. Я не добавил его, потому что не знаю, какое вычисление вы хотите выполнить (или хотите ли вы вывести ошибку или что-то вместо этого).

Демонстрация исправлений проблем 1 и 2 и примечание 1:

$(document).ready(function() {

  // variables
  var firstCase = 60;
  var results = 0;
  var casePrice = 38.17;


  // clear on load
  $("#result").empty();

  $("#calculate").on("click", function() {
    var shares = parseFloat($("#shares").val());

    if (shares <= firstCase) {
      results = casePrice;
    } else if (shares <= firstCase * 2) {
      results = casePrice * 2;
    }

    $("#result").text(results);
  });
});

/* calculator */

.shares {
  max-width: 500px;
  line-height: 300%;
}

.sqft-enter {
  margin: 20px 0 0 0;
  font-weight: bold;
  padding-bottom: 5px;
}

.total {
  padding-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator">
  <label class="sqft-enter">Enter square feet:</label><input name="shares" id="shares" type="text"><button onclick="calculate" id="calculate"> Calculate </button>
  <br>
  <div class="total">
    Total Value: $
    <span id="result"></span>
  </div>
</div>