Калькулятор Javascript / HTML с числами и переключателями не отображает выходные данные

#javascript #html

#javascript #HTML

Вопрос:

Сегодня я начал изучать Javascript / HTML и пытаюсь создать калькулятор прибыли для приложения для перепродажи, который поможет мне отслеживать мою прибыль. Общие правила таковы, что за любой товар стоимостью менее 15 долларов взимается комиссия в размере 2,95 доллара, а за все, что превышает 15 долларов, взимается комиссия в размере 20%. Вы также можете предложить покупателям скидки в размере 0 долларов США (нет), 2,12 доллара США (доставка 4,99 доллара США) или 7,11 доллара США (бесплатная доставка) на стоимость доставки. Пока все работает, за исключением того факта, что когда я нажимаю на кнопку «Нажмите, чтобы рассчитать», ничего не отображается. Я не хочу использовать alert(), потому что я хочу сохранить вкладку истории, чтобы я мог ссылаться на то, что я ранее ввел.

Как мне заставить калькулятор распечатать без использования alert()?
Как я могу сохранить страницу / панель истории на стороне калькулятора?

Спасибо!

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Profit Calculator</title>
    <script type="text/javascript">
      function computeProfit() {
        var sell = Number(document.getElementById('sell').value);
        var original = Number(document.getElementById('original').value);
        var ship_offer = document.getElementsByName('ship_offer').value;
        if (sell <= 15) {
          if (ship_offer[1].checked) {
            var result = (sell - 2.95 - 2.12 - original).toFixed(2);
          } else if (ship_offer[0].checked) {
            var result = (sell - 2.95 - 7.11 - original).toFixed(2);
          } else {
            var result = (sell - 2.95 - original).toFixed(2);
          }
        } else {
          if (ship_offer[1].checked) {
            var result = (sell * 0.8 - 2.12 - original).toFixed(2);
          } else if (ship_offer[0].checked) {
            var result = (sell * 0.8 - 7.11 - original).toFixed(2);
          } else {
            var result = (sell * 0.8 - original).toFixed(2);
          }
        }
        result = result.toString().replace(/B(?=(d{3}) (?!d))/g, ',');
        document.getElementById('result').innerHTML = 'Profit: 






Развернуть фрагмент


Обновить:

примеры->

цена продажи: $ 13
первоначальная цена (по какой цене продавец первоначально купил товар): $ 6
скидка на доставку: отсутствует (продавец не должен покрывать какие-либо расходы на доставку покупателю)
прибыль: 4,05 (13-2.95-6)
цена продажи: $ 13
первоначальная цена: $ 6
скидка на доставку: $ 4,99 (первоначальная стоимость доставки для покупателей составляет $ 7,11, но теперь она составляет $ 4,99, потому что продавец покрывает $ 2,12)
прибыль: 1.93 (13-2.95-2.12-6)
цена продажи: $ 13
первоначальная цена: $ 6
скидка на доставку: бесплатно (первоначальная стоимость доставки для покупателей составляет 7,11 доллара, но теперь она бесплатная, потому что продавец покрывает все 7,11 доллара)
прибыль: -3,06 (13-2.95-7.11-6)
цена продажи: $ 100
первоначальная цена: $ 60
скидка на доставку: нет
прибыль: 20 (100*0.8-60 )
цена продажи: $ 100
первоначальная цена: $ 60
скидка на доставку: $ 4.99
прибыль: 17.88 (100*0.8-2.12-60)
цена продажи: $ 100
первоначальная цена: $ 60
скидка на доставку: бесплатно
прибыль: 12.89 (100*0.8-7.11-60)


Комментарии:
1.   ship_offer = document.getElementsByName("ship_offer").value    является проблемой, поскольку    .getElementsByName()    возвращает коллекцию элементов.   Кроме того, у вас должно быть просто    var result    или    let result    выше всех этих условий, поскольку    var    каждый раз нужно писать дополнительный код.  
2.  @StackSlave могу ли я это сделать?   var ship_offer1 = document.getElementById("ship_offer1").значение; var ship_offer2 = document.getElementById("ship_offer2").значение; var ship_offer3 = document.getElementById("ship_offer3").значение; <входной идентификатор = "ship_offer1" тип = "радио" имя = "ship_offer">Нет <br> <идентификатор ввода= "ship_offer2" тип = "radio" имя = "ship_offer"> $ 4,99<br> <идентификатор ввода= "ship_offer3" тип ="radio" имя = "ship_offer"> Бесплатно<br>  
3.  Конечно, или просто перебирайте коллекцию без    .value    свойства, получая    .value    на каждом шаге цикла:    const ship_offer = document.getElementsByName('ship_offer'); for(let n of ship_offer){ if(n.checked){ /* do something with n.value (I like n for node) */ } }    
4.  Вам это не может    getElementsByName().value    понравиться.   Удалите   .value()    , чтобы получить нужный массив  
Ответ №1:



 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Profit Calculator</title>
    <script type="text/javascript">
      function computeProfit() {
        const sell = Number(document.getElementById('sell').value);
        const original = Number(document.getElementById('original').value);
        // ship_offer is an array and you can't directly get the value, you need to loop
        const ship_offer = document.getElementsByName('ship_offer');
        let resu<
        let selectedShipOffer;

        if(!sell || !original) return document.getElementById('result').innerHTML = "One of the inputs is empty!";

        ship_offer.forEach(selected => {
            if(selected.checked) selectedShipOffer = selected.value;
        })

        if (sell <= 15) {
          if (selectedShipOffer === "4.99") {
            result = (sell - 2.95 - 2.12 - original).toFixed(2);
          } else if (selectedShipOffer === "none") {
            result = (sell - 2.95 - original).toFixed(2);
          } else {
            result = (sell - 2.95 - 7.11 - original).toFixed(2);
          }
        } else {
          if (selectedShipOffer === "4.99") {
            result = (sell * 0.8 - 2.12 - original).toFixed(2);
          } else if (selectedShipOffer === "none") {
            result = (sell * 0.8 - original).toFixed(2);
          } else {
            result = (sell * 0.8 - 7.11 - original).toFixed(2);
          }
        }
        result = result.toString().replace(/B(?=(d{3}) (?!d))/g, ',');
        document.getElementById('result').innerHTML = 'Profit: 






Развернуть фрагмент














Я исправил кучу вещей для вас и вуаля, но я чувствую, что что-то не так с логикой вычислений, и я не понял, честно говоря. Можете ли вы отредактировать свой пост и предоставить более подробную информацию? Например, может быть, куча примеров?


Комментарии:
1.  @bluestem кроме того, в идеальном мире, где это реальное веб-приложение, вам следует рассмотреть возможность обработки исключений, заставляя пользователя выбирать скидку на доставку, не позволяя пользователю вводить отрицательное число и так далее.  
2.  как вы рекомендуете обрабатывать исключения?   Должен ли я делать ошибки try catch, как в Java / Python, или есть более простой способ в JavaScript, где я могу указать конкретные параметры и заставить пользователя вводить все значения / все допустимые значения?  
3.  Поведение @bluestem в JS    try...catch    является довольно подробным для пользователей, поэтому мы обычно не используем его, если нет критической ошибки, которую необходимо обработать, иначе пользователям будет непонятно, когда возникает исключение, скажем, когда вы используете    try...catch    в вашем случае, что-то идет не так, скажем,переключатель не существует, он выдает исключение, которое вы видите в консоли браузера.   Но в вашем случае переключатель     существует, поэтому вы не будете считать его исключением.   Теперь, когда дело доходит до обработки обычных исключений, скажем, когда поля пусты и пользователь нажимает...  
4.  @bluestem ... "Нажмите, чтобы вычислить", вы в основном используете оператор if, чтобы проверить, является ли одно из полей пустым, выполнив, скажем,    if(!sell || !original) return document.getElementById('result').innerHTML = "One of the input fields is missing!";    

5.  @bluestem Сейчас я отредактирую код, чтобы вы могли увидеть его в действии.  



   resu<

      }

    </script>

  </head>

  <body>

    <p>Selling Price: $<input id="sell" type="number" min="3" max="10000000000" /></p>

    <p>Original Price: $<input id="original" type="number" min="0" max="10000000000" step=".01" /></p>

    <p>Shipping Discount:</p>

    <p>

      <input type="radio" name="ship_offer" />None<br />

      <input type="radio" name="ship_offer" />$4.99<br />

      <input type="radio" name="ship_offer" />Free<br />

    </p>

    <br />

    <button onclick="computeProfit()">Click to calculate</button>

  </body>

</html> 



Развернуть фрагмент



Обновить:

примеры->

цена продажи: $ 13
первоначальная цена (по какой цене продавец первоначально купил товар): $ 6
скидка на доставку: отсутствует (продавец не должен покрывать какие-либо расходы на доставку покупателю)
прибыль: 4,05 (13-2.95-6)
цена продажи: $ 13
первоначальная цена: $ 6
скидка на доставку: $ 4,99 (первоначальная стоимость доставки для покупателей составляет $ 7,11, но теперь она составляет $ 4,99, потому что продавец покрывает $ 2,12)
прибыль: 1.93 (13-2.95-2.12-6)
цена продажи: $ 13
первоначальная цена: $ 6
скидка на доставку: бесплатно (первоначальная стоимость доставки для покупателей составляет 7,11 доллара, но теперь она бесплатная, потому что продавец покрывает все 7,11 доллара)
прибыль: -3,06 (13-2.95-7.11-6)
цена продажи: $ 100
первоначальная цена: $ 60
скидка на доставку: нет
прибыль: 20 (100*0.8-60 )
цена продажи: $ 100
первоначальная цена: $ 60
скидка на доставку: $ 4.99
прибыль: 17.88 (100*0.8-2.12-60)
цена продажи: $ 100
первоначальная цена: $ 60
скидка на доставку: бесплатно
прибыль: 12.89 (100*0.8-7.11-60)

Комментарии:
1.   ship_offer = document.getElementsByName("ship_offer").value    является проблемой, поскольку    .getElementsByName()    возвращает коллекцию элементов.   Кроме того, у вас должно быть просто    var result    или    let result    выше всех этих условий, поскольку    var    каждый раз нужно писать дополнительный код.  
2.  @StackSlave могу ли я это сделать?   var ship_offer1 = document.getElementById("ship_offer1").значение; var ship_offer2 = document.getElementById("ship_offer2").значение; var ship_offer3 = document.getElementById("ship_offer3").значение; <входной идентификатор = "ship_offer1" тип = "радио" имя = "ship_offer">Нет <br> <идентификатор ввода= "ship_offer2" тип = "radio" имя = "ship_offer"> $ 4,99<br> <идентификатор ввода= "ship_offer3" тип ="radio" имя = "ship_offer"> Бесплатно<br>  
3.  Конечно, или просто перебирайте коллекцию без    .value    свойства, получая    .value    на каждом шаге цикла:    const ship_offer = document.getElementsByName('ship_offer'); for(let n of ship_offer){ if(n.checked){ /* do something with n.value (I like n for node) */ } }    
4.  Вам это не может    getElementsByName().value    понравиться.   Удалите   .value()    , чтобы получить нужный массив  
Ответ №1:






Развернуть фрагмент





Я исправил кучу вещей для вас и вуаля, но я чувствую, что что-то не так с логикой вычислений, и я не понял, честно говоря. Можете ли вы отредактировать свой пост и предоставить более подробную информацию? Например, может быть, куча примеров?

Комментарии:

1.  @bluestem кроме того, в идеальном мире, где это реальное веб-приложение, вам следует рассмотреть возможность обработки исключений, заставляя пользователя выбирать скидку на доставку, не позволяя пользователю вводить отрицательное число и так далее.  
2.  как вы рекомендуете обрабатывать исключения?   Должен ли я делать ошибки try catch, как в Java / Python, или есть более простой способ в JavaScript, где я могу указать конкретные параметры и заставить пользователя вводить все значения / все допустимые значения?  
3.  Поведение @bluestem в JS    try...catch    является довольно подробным для пользователей, поэтому мы обычно не используем его, если нет критической ошибки, которую необходимо обработать, иначе пользователям будет непонятно, когда возникает исключение, скажем, когда вы используете    try...catch    в вашем случае, что-то идет не так, скажем,переключатель не существует, он выдает исключение, которое вы видите в консоли браузера.   Но в вашем случае переключатель     существует, поэтому вы не будете считать его исключением.   Теперь, когда дело доходит до обработки обычных исключений, скажем, когда поля пусты и пользователь нажимает...  


4.  @bluestem ... "Нажмите, чтобы вычислить", вы в основном используете оператор if, чтобы проверить, является ли одно из полей пустым, выполнив, скажем,    if(!sell || !original) return document.getElementById('result').innerHTML = "One of the input fields is missing!";    
5.  @bluestem Сейчас я отредактирую код, чтобы вы могли увидеть его в действии.

resu< } </script> </head> <body> <p>Selling Price: $<input id="sell" type="number" min="3" max="10000000000" /></p> <p>Original Price: $<input id="original" type="number" min="0" max="10000000000" step=".01" /></p> <p>Shipping Discount:</p> <p>  <input type="radio" name="ship_offer" value="none" />None<br /> <input type="radio" name="ship_offer" value="4.99" />$4.99<br /> <input type="radio" name="ship_offer" value="free" />Free<br /> </p> <br /> <button onclick="computeProfit()">Click to calculate</button>  <div id="result"></div> </body> </html>

Развернуть фрагмент

Я исправил кучу вещей для вас и вуаля, но я чувствую, что что-то не так с логикой вычислений, и я не понял, честно говоря. Можете ли вы отредактировать свой пост и предоставить более подробную информацию? Например, может быть, куча примеров?

Комментарии:

1. @bluestem кроме того, в идеальном мире, где это реальное веб-приложение, вам следует рассмотреть возможность обработки исключений, заставляя пользователя выбирать скидку на доставку, не позволяя пользователю вводить отрицательное число и так далее.

2. как вы рекомендуете обрабатывать исключения? Должен ли я делать ошибки try catch, как в Java / Python, или есть более простой способ в JavaScript, где я могу указать конкретные параметры и заставить пользователя вводить все значения / все допустимые значения?

3. Поведение @bluestem в JS try...catch является довольно подробным для пользователей, поэтому мы обычно не используем его, если нет критической ошибки, которую необходимо обработать, иначе пользователям будет непонятно, когда возникает исключение, скажем, когда вы используете try...catch в вашем случае, что-то идет не так, скажем,переключатель не существует, он выдает исключение, которое вы видите в консоли браузера. Но в вашем случае переключатель существует, поэтому вы не будете считать его исключением. Теперь, когда дело доходит до обработки обычных исключений, скажем, когда поля пусты и пользователь нажимает…

4. @bluestem … «Нажмите, чтобы вычислить», вы в основном используете оператор if, чтобы проверить, является ли одно из полей пустым, выполнив, скажем, if(!sell || !original) return document.getElementById('result').innerHTML = "One of the input fields is missing!";

5. @bluestem Сейчас я отредактирую код, чтобы вы могли увидеть его в действии.

resu<
}
</script>
</head>
<body>
<p>Selling Price: $<input id=«sell» type=«number» min=«3» max=«10000000000» /></p>
<p>Original Price: $<input id=«original» type=«number» min=«0» max=«10000000000» step=«.01» /></p>
<p>Shipping Discount:</p>
<p>
<input type=«radio» name=«ship_offer» />None<br />
<input type=«radio» name=«ship_offer» />$4.99<br />
<input type=«radio» name=«ship_offer» />Free<br />
</p>
<br />
<button onclick=«computeProfit()»>Click to calculate</button>
</body>
</html>

Развернуть фрагмент

Обновить:
примеры->

цена продажи: $ 13

первоначальная цена (по какой цене продавец первоначально купил товар): $ 6

скидка на доставку: отсутствует (продавец не должен покрывать какие-либо расходы на доставку покупателю)

прибыль: 4,05 (13-2.95-6)

цена продажи: $ 13

первоначальная цена: $ 6

скидка на доставку: $ 4,99 (первоначальная стоимость доставки для покупателей составляет $ 7,11, но теперь она составляет $ 4,99, потому что продавец покрывает $ 2,12)

прибыль: 1.93 (13-2.95-2.12-6)

цена продажи: $ 13

первоначальная цена: $ 6

скидка на доставку: бесплатно (первоначальная стоимость доставки для покупателей составляет 7,11 доллара, но теперь она бесплатная, потому что продавец покрывает все 7,11 доллара)

прибыль: -3,06 (13-2.95-7.11-6)

цена продажи: $ 100

первоначальная цена: $ 60

скидка на доставку: нет

прибыль: 20 (100*0.8-60 )

цена продажи: $ 100

первоначальная цена: $ 60

скидка на доставку: $ 4.99

прибыль: 17.88 (100*0.8-2.12-60)

цена продажи: $ 100

первоначальная цена: $ 60

скидка на доставку: бесплатно

прибыль: 12.89 (100*0.8-7.11-60)

Комментарии:

1. ship_offer = document.getElementsByName("ship_offer").value является проблемой, поскольку .getElementsByName() возвращает коллекцию элементов. Кроме того, у вас должно быть просто var result или let result выше всех этих условий, поскольку var каждый раз нужно писать дополнительный код.

2. @StackSlave могу ли я это сделать? var ship_offer1 = document.getElementById(«ship_offer1»).значение; var ship_offer2 = document.getElementById(«ship_offer2»).значение; var ship_offer3 = document.getElementById(«ship_offer3»).значение; <входной идентификатор = «ship_offer1» тип = «радио» имя = «ship_offer»>Нет <br> <идентификатор ввода= «ship_offer2» тип = «radio» имя = «ship_offer»> $ 4,99<br> <идентификатор ввода= «ship_offer3″ тип =»radio» имя = «ship_offer»> Бесплатно<br>

3. Конечно, или просто перебирайте коллекцию без .value свойства, получая .value на каждом шаге цикла: const ship_offer = document.getElementsByName('ship_offer'); for(let n of ship_offer){ if(n.checked){ /* do something with n.value (I like n for node) */ } }

4. Вам это не может getElementsByName().value понравиться. Удалите .value() , чтобы получить нужный массив

Ответ №1:

Развернуть фрагмент

Я исправил кучу вещей для вас и вуаля, но я чувствую, что что-то не так с логикой вычислений, и я не понял, честно говоря. Можете ли вы отредактировать свой пост и предоставить более подробную информацию? Например, может быть, куча примеров?

Комментарии:

1. @bluestem кроме того, в идеальном мире, где это реальное веб-приложение, вам следует рассмотреть возможность обработки исключений, заставляя пользователя выбирать скидку на доставку, не позволяя пользователю вводить отрицательное число и так далее.

2. как вы рекомендуете обрабатывать исключения? Должен ли я делать ошибки try catch, как в Java / Python, или есть более простой способ в JavaScript, где я могу указать конкретные параметры и заставить пользователя вводить все значения / все допустимые значения?

3. Поведение @bluestem в JS try...catch является довольно подробным для пользователей, поэтому мы обычно не используем его, если нет критической ошибки, которую необходимо обработать, иначе пользователям будет непонятно, когда возникает исключение, скажем, когда вы используете try...catch в вашем случае, что-то идет не так, скажем,переключатель не существует, он выдает исключение, которое вы видите в консоли браузера. Но в вашем случае переключатель существует, поэтому вы не будете считать его исключением. Теперь, когда дело доходит до обработки обычных исключений, скажем, когда поля пусты и пользователь нажимает…

4. @bluestem … «Нажмите, чтобы вычислить», вы в основном используете оператор if, чтобы проверить, является ли одно из полей пустым, выполнив, скажем, if(!sell || !original) return document.getElementById('result').innerHTML = "One of the input fields is missing!";

5. @bluestem Сейчас я отредактирую код, чтобы вы могли увидеть его в действии.

Вопрос:

Комментарии:

Ответ №1:

Комментарии:

Комментарии:

Ответ №1:

Комментарии:

Комментарии:

Комментарии:

Ответ №1:

Комментарии:

Вам также может понравиться

Отобразить пользовательское поле продукта с помощью крючка «woocommerce_email_order_meta» в уведомлении администратора WooCommerce по электронной почте

Функции обратного вызова React JS, удаляющие список

Дата вызова из текстового файла в sql-запросе с использованием python