Javascript客户端饮料价格计算器_Javascript

Javascript客户端饮料价格计算器

javascript

Javascript客户端饮料价格计算器,javascript,Javascript,我正在从事一个个人项目，我希望通过表单的文本框获取用户输入，对其执行计算，并在同一页面上显示结果。我在一家餐厅工作，希望简化计算鸡尾酒成本的过程。我是Javascript新手，这是我第一个合适的项目。在将用户输入存储到变量中之后，我很难弄清楚该怎么做。我创建了一个对象drinkPrices，在name关键字下包含三种不同类型的饮料，在其他关键字下包含各自的价格，然后是一个计算价格的方法。我不确定这种方法是否正确，任何反馈/建议/帮助都将不胜感激主要困难： 1.我是否正确存储了用户输入？ 2.如

我正在从事一个个人项目，我希望通过表单的文本框获取用户输入，对其执行计算，并在同一页面上显示结果。我在一家餐厅工作，希望简化计算鸡尾酒成本的过程。我是Javascript新手，这是我第一个合适的项目。在将用户输入存储到变量中之后，我很难弄清楚该怎么做。我创建了一个对象drinkPrices，在name关键字下包含三种不同类型的饮料，在其他关键字下包含各自的价格，然后是一个计算价格的方法。我不确定这种方法是否正确，任何反馈/建议/帮助都将不胜感激

主要困难： 1.我是否正确存储了用户输入？ 2.如何获取用户输入并将其引用到我创建的对象中的方法？ 3.如何在页面上显示计算结果

    <!DOCTYPE html>
<html lang="en">
<head>
    <script src="submitAlert.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="theform">
    Enter Spirit Name:<br>
    <input type="text" id="sname" name="spiritname"><br>
    Enter Spirit Amount (in ounces):<br>
    <input type="text" id="samount" name="spiritamount">
    <br><br>
    <input type="submit" value="submit" onclick="return foo();" />
</form>
</body>
<p id="outputarea"> ...Output area is right here...</p>
</html>

} //这是我在用户点击submit时使用的代码。我错过了很多//

function foo() {
    var a = document.getElementById("sname").value;
    var b = document.getElementById("samount").value;

    alert("Submit button clicked!");
    return true;
}

只需使用名称价格图：

 const price = {
    rail:2,
    call:4,
    premium:6
 };

然后您可以简单地获得价格：

 function calculatePrice() {
   const name = document.getElementById("sname").value;
   const amount = document.getElementById("samount").value;

   alert(`It costs ${amount * prices[name]}`);
 }

提示：如果您不想向服务器发送内容，请不要使用表单，只需使用即可，这会使事情变得复杂，并为变量和函数指定适当的名称

以下是进一步编码的一些改进：在处理预定义的选项列表时，将输入元素替换为选择列表，这样可以防止用户的连续性打字错误。当您使用select并且只对相应的值感兴趣时，请使用选项标记上的value属性。当您需要数字输入时，use或min/max/step是可选的，也可以添加到数字输入中。在表单上使用onsubmit而不是onclick-on按钮，让浏览器验证更好实践的输入部分

在这里，我拼凑了一个例子：

document.querySelector'theform'。添加EventListener'submit'，函数E{ e、防止违约；让price=this.spirit.value*1；设amount=this.spiritamount.value*1；总金额=价格*金额.toFixed2； document.querySelector'outputrea'.textContent=total； }; 输入精灵名称：栏杆呼叫保险费以盎司为单位输入酒精量：计算

谢谢你，史蒂文！如果我想以十进制形式输入金额，我会怎么做？例如，1.50盎司。您可以指定任意精度的数字和范围输入的步长属性，例如步长=0.01或步长=0.5。我明白了，谢谢。你能解释一下你是如何使用收据变量和if语句的吗？我很难准确地计算出来。当然：当所选的酒精存在于收据中时，按数量增加相应的值。不要覆盖该值，否则将属性和值设置为初始状态。在对象中创建它。如果愿意，可以将其重构为此：if！收据中的酒精{收据[酒精]=0；}收据[酒精]+=金额；然后，if语句确保条目存在，然后在没有if的情况下向其添加值，浏览器计算undefined+amount，听起来很吓人，这不是最佳做法。

 function calculatePrice() {
   const name = document.getElementById("sname").value;
   const amount = document.getElementById("samount").value;

   alert(`It costs ${amount * prices[name]}`);
 }