Javascript提示计算器_Javascript

Javascript提示计算器

javascript

Javascript提示计算器,javascript,Javascript,我正在使用Javascript开发一个小费计算器，用户应该能够输入账单金额，推式计算，并查看包括账单和小费在内的小费和总额我已经在这方面工作了一段时间，但似乎无法使它正常工作 <!DOCTYPE html> <head> <title>Tip Calculator</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <bo

我正在使用Javascript开发一个小费计算器，用户应该能够输入账单金额，推式计算，并查看包括账单和小费在内的小费和总额

我已经在这方面工作了一段时间，但似乎无法使它正常工作

<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <header>
        <h1>Tip Calculator</h1>
    </header>
    <form>
        Amount: $<input id="bill" type="text">
        <br>
        <button onclick="calc()">Calculate</button>
        <br>
        Tip: <span id="tip"></span>
        <br>
        Total: <span id="total"></span>
    </form>
</div>
<script>
    function calc() {
        var bill = document.getElementById('bill').value;
        var tip = bill * .15;
        var total = bill + tip;

        document.getElementById("tip").innerHTML= "$"+(tip).toFixed(2);
        document.getElementById("total").innerHTML= "$"+(total).toFixed(2);         
    }
</script>
</body>

有什么建议吗？

试试标准的输入按钮

<input type="button" onclick="calc()" value="Calculate">

由于各种原因，表单通常用于向服务器提交数据。但是，即使在同一页面上完成所有操作，它们也有一些好处，例如可以在任何输入中按enter键，并且仍然可以在不使用额外代码的情况下提交。我在这里做的是给它一个你想要使用的函数的动作，然后把你的按钮改成一个标准的提交

有多种方法可以将字符串转换成数字，我在这里使用了最简单的方法：数字。我在bill上使用它是为了使total_bill正确显示，而不是将两个字符串并排放在一起。我将变量的total改为total_bill，因为将多个事物命名为相同的名称（例如id和变量）不是一个好主意。我错过了账单，但我会保持原样，因为它通常仍然像这里一样工作

最后，toFixed获取一个数字并使其成为字符串。这意味着您必须确保它是一个数字，而不是一个字符串。这就是在输出之前再次使用数字的原因

试试这个：

<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <header>
        <h1>Tip Calculator</h1>
    </header>
    <form action="javascript:void(calc())">
        Amount: $<input id="bill" type="text">
        <br>
        <input type="submit" value="Calculate">
        <br>
        Tip: <span id="tip"></span>
        <br>
        Total: <span id="total"></span>
    </form>
</div>
<script>
    function calc() {
        var bill = Number(document.getElementById('bill').value);
        var tip = bill * .15;
        var total_bill = bill + tip;

        document.getElementById("tip").innerHTML= "$"+Number(tip).toFixed(2);
        document.getElementById("total").innerHTML= "$"+Number(total_bill).toFixed(2);         
    }
</script>
</body>

你有一些问题。您需要click函数传递事件，以便停止表单提交，从而导致页面刷新。最佳实践是使用javascript附加click处理程序。您还需要将输入的字符串值转换为实际数字，以便用于加法

以下是我推荐的标记：

不应用于布局。相反，您可以在应转到新行的图元上使用display:block。默认情况下，许多元素都会这样做，例如。我还将输入类型更改为number，因为这在这里似乎更合适

不幸的是，有些人会建议并争辩说，可以使用内嵌js，即html中的任何一种javascript，比如onclick。事实并非如此。我希望您能阅读其中的一些结果：

尝试使用这个

function calc() {
    var bill = $("#bill").value;
    var tip = bill * .15;
    var total = bill + tip;

    document.getElementById("tip").innerHTML= "$"+(tip).toFixed(2);
    document.getElementById("total").innerHTML= "$"+(total).toFixed(2);    

}

还可以尝试创建JSFIDLE来创建一些演示。

问题是当您创建document.getElementById'bill.value；它返回字符串值，而不是数字值。为了实现固定方法，您需要使用parseIntdocument.getElementById'bill'.value将值解析为数字

还需要返回false；停止提交表单

您的表单正在提交，因此将丢失值。有很多方法可以避免这种情况——一种是将表单定义为

您的总数不会计算，因为账单被读取为字符串。一种将其强制为数字的方法是乘以1，所以总数为

var总计=账单*1+小费

这是一个工作演示：

似乎无法使其正常工作也没有帮助。详细描述您的问题。使用Firefox的Firebug等调试工具可以更容易地识别javascript代码中的问题。Sad。支持内联javascript。这是一种可怕的做法，不应使用或推荐。另外，如果你想要一个按钮，使用一个按钮。按钮在旧的浏览器中不起作用。内联js并不可怕，只要它是稀疏的。这与ASP.net中使用的做法相同。否则，我不喜欢为了找到一个事件绑定而搜索数千行外部javascript文件。可以使用它快速地测试一些东西，就是这样。您不应该提倡内联JSevent绑定非常简单@m59的答案一点也不难理解。而且，即使是最小的任务，使用良好的实践也不会带来任何开销。实际上，你的答案并不能解决大多数问题。您可能希望在将来发布代码之前对其进行测试。谢谢，这非常有效！我非常感谢您花时间解释修改后的代码。再次感谢@USER 3221658接受任何东西，我有大量的代表，但是请考虑我展示给你们的最佳实践并在我的答案中解释。请我花了很多时间为你准备。^我完全同意。请不要使用内联JS。使用MVC方法，您将set@m59我喜欢修改一个人的代码，同时尽可能地保持原样。你告诉他们使用指定基数为10的parseInt…这是钱，有百分之一百的位置。Wutrudoin？@Rhyono很好的观点-我更新了。至于理念——我看到的大多数来自网络世界的代码充斥着糟糕的实践。这是不可能的，我看到这样的帖子，也有坏的做法，他们都认为这是一个相关的问题。因此，我认为我们

尽可能经常、热情地宣传最佳实践。试想一下，如果人们看到一个关于准备好的声明的绝望的请柬并聆听它，那么可以防止多少身份盗窃。这个例子将在旧版本的IE中被打破。如果你与事件侦听器发生冲突，你需要考虑或者仅仅使用一个正确的LIB。@ USE1389596值得问自己，IE或当前版本的旧版本的用户是否应该得到代码来工作？@ USER 1389596重要的是首先遵循专业接受的标准并实现向后兼容的解决方案，不要仅仅因为最佳实践需要改进就完全忽视它们。我回答问题的目的是促进一个更好的开发人员的世界，而不是那些有着很高声誉的懒惰的开发人员。在旧的IE中争论支持只是有点愚蠢。对于极少数的用户来说，它会导致更少的代码可维护性，更不用说与之相关的实际成本了。这是一个很好的答案。世界上有三分之一的人可能在运行Windows XP，而企业界在IE版本方面也落后。需要支持的内容并不总是由开发人员决定。

// get element references - no need to keep repeating this in the function
var myBtn = document.getElementById('my-button');
var tipElem = document.getElementById("tip");
var totalElem = document.getElementById("total");

//attach click event listener
myBtn.addEventListener('click', calc);

//the event object is passed to this automatically - I'm assigning it to "e"
function calc(e) {
  //prevent the default action - form submit / page refresh
  e.preventDefault();
  var input = document.getElementById('bill');
  //convert string value to Number
  var bill = parseFloat(input.value);
  var tip = bill * 0.15;
  var total = bill + tip;

  //textContent is better than innerHTML for setting text
  tipElem.textContent = "$"+(tip).toFixed(2);
  totalElem.textContent = "$"+(total).toFixed(2);  
}

<form>
  <p>Amount: $<input id="bill" type="number"></p>
  <button id="my-button">Calculate</button>
  <p>Tip: <span id="tip"></span></p>
  <p>Total: <span id="total"></span></p>
</form>

function calc() {
    var bill = $("#bill").value;
    var tip = bill * .15;
    var total = bill + tip;

    document.getElementById("tip").innerHTML= "$"+(tip).toFixed(2);
    document.getElementById("total").innerHTML= "$"+(total).toFixed(2);    

}

<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <header>
        <h1>Tip Calculator</h1>
    </header>
    <form>
        Amount: $<input id="bill" type="text">
        <br>
        <a onclick="calc()">Calculate</a>
        <br>
        Tip: <span id="tip"></span>
        <br>
        Total: <span id="total"></span>
    </form>
</div>
<script>
    function calc() {
        var bill = document.getElementById('bill').value;
        var tip = bill * .15;
        var btotal = bill + tip;

        document.getElementById("tip").innerHTML= "$"+Number(tip);
        document.getElementById("total").innerHTML= "$"+Number(btotal);
    }
</script>
</body>