文章/答案/技术大牛

发布

社区首页 >问答首页 >带有数字和单选按钮的Javascript/HTML计算器没有显示输出

问带有数字和单选按钮的Javascript/HTML计算器没有显示输出
EN

Stack Overflow用户

提问于 2021-01-05 01:55:07

回答 1查看 136关注 0票数 1

我今天开始学习Javascript/HTML，我正试图为一个转售应用程序制作一个利润计算器，以帮助我跟踪我的利润。一般规则是15元以下的物品收取2.95元的佣金，而超过15元的物品则收取20%的佣金。您也可以向买家提供0美元(零)，2.12美元(4.99美元)或7.11美元(免费送货)的运费折扣。到目前为止，除了我点击“点击计算”按钮之外，一切都是正常的，什么也没有出现。我不想使用警告()，因为我想保留一个历史选项卡，这样我就可以引用我以前输入的内容。

如何在不使用()的情况下使计算器打印出来？

如何将历史页/栏保存在计算器的一侧？

谢谢!

<!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: $' + result;
      }
    </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)

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-05 02:17:50

<!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 result;
        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: $' + result;
      }
    </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>
      <!-- Grabbing the radio buttons by their value, more scalable in case you want to change its position and such. -->
      <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>
    <!-- Missing div for result -->
    <div id="result"></div>
  </body>
</html>

我帮你修了一堆东西，但是我觉得计算逻辑有问题，我没能让它说实话。你能编辑你的帖子并给出更多细节吗？就像一堆例子？

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65572211

复制

相似问题

问带有数字和单选按钮的Javascript/HTML计算器没有显示输出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有数字和单选按钮的Javascript/HTML计算器没有显示输出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有数字和单选按钮的Javascript/HTML计算器没有显示输出
EN