javascript - 警报框 小费计算器

标签 javascript html alert calculator

您好,我正在尝试让小费计算器全部出现在警报框中,我正在努力让代码正常工作并让警报框显示出来并获得正确的计算。我希望它首先在警报框中显示账单的总成本,然后根据该示例对服务进行评级。差 - 8% 一般 - 10 美元 好 - 15% 和优秀 20%。如果有人可以帮助我,谢谢。链接:http://jsfiddle.net/saber2356/wxy9zfn8/

JavaScript:

<html>
    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>tip</title>
    <script type="text/javascript">

    function calculateTip()
    {
        var bill, tip, answer;

        bill = document.TipCalculator.bill.value - 0;
        tip = document.TipCalculator.tip.value - 0;



        var cal= tip;
        if ("poor") { Math.round(((8/100) * bill)*100)/100;
        }else if ("fair"){ Math.round(((10/100) * bill)*100)/100;
        }else if ("good"){ Math.round(((15/100) * bill)*100)/100;
        }else ("excellent");{ Math.round(((20/100) * bill))*100/100;
        }




        bill = Math.round((bill + tip)*100)/100;




        document.TipCalculator.answer.value = bill;
        document.TipCalculator.Total.value = Total;

    }
    </script>
    </head>
    <body>
    <h1>Tip Calculator</h1>

    <script>function myFunction(){
    var calculateTip = prompt("Amount of Bill: ");}
    if (!number)){ alert ("Sorry cost " " must be a number"); }

    }else {("Rate your service as either: Poor, Fair, Good or Excellent ");}

    }else if {("Final Total = ")}

    </script>

</body>

最佳答案

Calummm 的答案是正确的,确实无法改进,但它提到了一些更好的方法,所以我在这里提出一些建议。

JSFiddle

其中之一是将“设置”与代码的其余部分分开。通常,您的 HTML 对此很有用。这是一个以百分比作为值的下拉列表:

<select id="service" onchange="valueChange()">
  <option id="poor" value="8">Poor</option>
  <option id="fair" value="10">Fair</option>
  <option id="good" value="15">Good</option>
  <option id="excellent" value="25">Excellent</option>
</select>

如果我们处理得当,我们将能够在此处添加或删除选项,例如 30% 的“杰出”或 1% 的“可怕”,然后在代码中不更改任何其他内容。 JavaScript 只会选择这些更改并进行更改。

我们也将“bill”视为输入......在本例中只是一个数字框。

<input type="number" id="bill" onchange="valueChange()" onkeyup="valueChange()"/>

然后我们将创建一些地方来输出结果:

<h2>Tip</h2>
<h3 id="tip">0.00</h3>

<h2>Total</h2>
<h3 id="total">0.00</h3>

现在我们需要一个简单的数学函数,它只需要两个数字并吐出小费,仅此而已。

function calculateTip(percent, bill){
  return parseFloat((percent * bill / 100), 2);
}

现在我们需要将输入/输出与函数结合起来。这是通过此函数完成的,该函数由上面 HTML 中的事件处理程序调用。

function valueChange(){

  //input
  var percent = parseInt(document.getElementById("service").value);
  var bill = parseInt(document.getElementById("bill").value);

  //the raw math
  var tip = calculateTip(percent, bill);
  var total = tip + bill;

  //output
  document.getElementById("tip").innerHTML = tip;
  document.getElementById("total").innerHTML = total;
}

关于javascript - 警报框 小费计算器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27370557/

相关文章:

javascript - 如何检查 window.history.back 在 javascript 中是否有值(value)

javascript - ODOO报告自动将字符<转换为<

html - 浏览器支持另一个 flexbox 内部的 Flexbox

javascript - 我可以在 Javascript 中选择 HTML 元素最近的祖先(沿着 DOM 向上走)吗?

html - 在固定的 div 位置下滚动时隐藏页面内容

javascript - 水平移动一个div

javascript - window.alert 因 Canvas 碰撞而发生两次

javascript - 处理 div 内的 javascript 弹出窗口

javascript - jQuery UI 警报对话框作为alert() 的替代品

javascript - 当条件肯定为真时,Javascript < 运算符返回 false 的问题