Question

我正在开展个人项目，我希望通过表单的文本框获取用户输入，对其进行计算，并在同一页面上显示结果。我在一家餐馆工作，想简化计算鸡尾酒成本的过程。我是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>

Javascript：

var drinkPrices =  {
    name: ['rail', 'call', 'premium'],
    railPrice:  4,
    callPrice: 6,
    premiumPrice: 8,
    quantity: 0,
    calculatePrice: function() {
        if (name === 'rail') {
            calculatePrice = quantity * railPrice;
        } else if (name === 'call') {
            calculatePrice = quantity * callPrice;
        } else if (name ==='premium') {
            calculatePrice = quantity * premiumPrice;
        }
        return this.calculatePrice;
    }

} //这是用户点击提交时的代码。我错过了很多//

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

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

Answer 1

只需使用名称价格地图：

 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]}`);
 }

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

Answer 2

以下是您进一步编码的一些改进：在处理预定义的选项列表时，将input元素替换为select列表，这样可以防止用户的加入拼写错误。
当您使用select并且只对相应的值进行了分析时，请使用value标记上的option属性。
当您需要数字输入时，请使用<input type="number">或<input type="range" min="0" max="100" step="1">（最小/最大/步长是可选的，也可以添加到数字输入中。）
使用表单上的onsubmit代替onclick按钮，让浏览器验证输入（更好的练习的一部分）。

我在这里一起攻击了一个例子：

document.querySelector('#theform').addEventListener('submit', function(e) {
  e.preventDefault();
  let price = this.spirit.value * 1;
  let amount = this.spiritamount.value * 1;
  let total = (price * amount).toFixed(2);
  document.querySelector('#outputarea').textContent = total;
});

<form id="theform">
	Enter Spirit Name:<br>
	<select name="spirit">
		<option value="4">rail</option>
		<option value="6">call</option>
		<option value="8">premium</option>
	</select><br>
	Enter Spirit Amount (in ounces):<br>
	<input type="number" name="spiritamount" value="1">
	<br><br>
	<button>Calculate</button>
</form>
<p id="outputarea">0.00</p>

这是列出条目的另一个例子：

let receipt = {};
const prices = {
  'rail': 4,
  'call': 6,
  'premium': 8
};

// clear the receipt
document.querySelector('#reset').addEventListener('click', function(e) {
    e.preventDefault();
    receipt = {};
    document.querySelector('#outputarea').innerHTML = '';
});

document.querySelector('#theform').addEventListener('submit', function(e) {
  e.preventDefault();
  let spirit = this.spirit.value;
  let amount = this.spiritamount.value * 1;
  if(spirit in receipt) {
    receipt[spirit] += amount;
  } else {
    receipt[spirit] = amount;
  }
  let list = '';
  let total = 0;
  for(const e in receipt) {
    let sum = prices[e] * receipt[e];
    list += `<div>${e} x ${receipt[e]} = ${sum.toFixed(2)}</div>`;
    total += sum;
  }
  list += `<hr>${total.toFixed(2)} ¤`;
  document.querySelector('#outputarea').innerHTML = list;
})

<form id="theform">
	Select Spirit: <select name="spirit">
		<option>rail</option>
		<option>call</option>
		<option>premium</option>
	</select><br>
	Enter Spirit Amount (in ounces): <input type="number" name="spiritamount" value="1"><br><br>
	<button>Add to receipt</button> or <button id="reset">Reset</button>
</form>
<p id="outputarea"></p>

Javascript客户端饮料价格计算器

2 个答案: