Question

我正在使用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>

有什么建议吗？

Answer 1

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

<强> Live demo (click).

// 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>

<br>不应用于布局。相反，您可以对应该转到新行的元素使用display: block。默认情况下，许多元素都会执行此操作，例如<p>。我还将输入类型更改为number，因为这似乎更合适。

不幸的是，有些人会建议并争辩说内联js（你的html中的任何类型的javascript，如onclick）都可以使用。事实并非如此。我希望您会阅读其中一些结果： Why is inline JS bad?

Answer 2

表单通常用于将数据提交给服务器，原因有多种。但是，即使在同一页面上完成所有操作，它们也有一些好处（例如能够在任何输入中输入并仍然在不使用额外代码的情况下提交）。我在这里做的是给你一个你想要使用的函数的action，然后将你的按钮改为标准的submit。

有多种方法可以获取字符串并将其转换为数字，我在这里使用最简单的方法：Number()。我在bill上使用它以正确显示total_bill显示（而不是将两个字符串添加到一起，只是将它们并排放置）。我为变量更改了total到total_bill，因为将多个事物命名为相同（例如id和变量）并不是一个好主意。我错过了账单/账单，但我会保留它，因为它通常仍然有用（就像这里）。

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

试试这个：

<!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>

Answer 3

尝试使用标准输入按钮

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

此外，var上不一定存在toFixed（）方法。在Chrome中进行测试时，如果您明确转换为数字

，则会有效

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

Answer 4

尝试使用此

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);    

}

还尝试创建 JSFIDDLE ，以便您创建一些演示。

Answer 5

问题是，当您执行document.getElementById('bill').value;时，它会返回string值，而不是Number值。要使用toFixed方法，您需要使用parseInt(document.getElementById('bill').value,10);

将值解析为Number

您还需要return false;停止提交表单。

Answer 6

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

<form onsubmit="return false">
您的总数不会计算，因为帐单被读为字符串。强制它成为数字的一种方法是乘1，所以总数将是

var total = bill*1 + tip;

以下是工作演示：http://jsfiddle.net/5GQZ8/

Answer 7

<!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>

Javascript提示计算器

7 个答案: