如何使这两个javascript代码协同工作

How can I get these two javascript codes to work together?

本文关键字：两个 javascript 代码 协同工作 何使这      更新时间：2023-09-26

我用html制作了一个表单。

一开始我觉得很简单。我的输入是用户输入的金额。然后，我编写了javascript代码，根据用户输入的金额计算动态价格。代码如下：

<input class="typeahead" type="text" placeholder="Amount" name="Gift-Card Amount"/>

javascript：

jQuery("input[name='Gift-Card Amount']").change(function () {
    if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
          jQuery(this).val('');
          return false;
   }
        var calc = parseFloat(this.value) * 0.95;
        jQuery(this).parents("form").find("input[name='price']").val(calc);
    });

计算结果为常数0.95。所以我添加了一个新的输入。商店名称。因此用户可以输入商店名称。金额：

<input class="stores typeahead" type="text" placeholder="Stores" name="name"/>

我希望价格能根据商店名称和数量而变化。所以我创建了这个对象：

var stores = {
    "McDonalds" : .90,
    "Target" : .92,
}
 var storeName = jQuery(this).parents("form").find("input[name='name']").val();
 console.log(stores[storeName]);

因此，该值可以替换为基于输入的商店名称的预设值，而不是常数0.95。我不知道如何让这两个人一起工作。也就是说，我如何对第一个javascript进行重新编码，以重新确定var存储值，而不是0.95？

jQuery("input[name='Gift-Card Amount']").change(function () {
    var amount = parseFloat(this.value);
    if (isNaN(amount) || !isFinite(amount)) {
        jQuery(this).val('');
        return false;
    }
    var storeName = jQuery(this).parents("form").find("input[name='name']").val();
    if (storeName in stores) {
        var calc = amount * stores[storeName];
        jQuery(this).parents("form").find("input[name='price']").val(calc);
    }
});

我还建议您将Stores从文本输入更改为<select>。这样，你就不依赖于用户正确拼写商店，包括大写字母。

<select name="name" class="storeName">
    <option value="">Please select a store</option>
    <option value=".90">McDonalds</option>
    <option value=".92">Target</option>
</select>

然后你可以使用

var calc = parseFloat(jQuery(this).parents("form").find(".storeName").val());

我会这样做：

function calcPrice(element) {
  // Use the element that called the listener to find the form
  var form = element.form;
  // Access form controls as named properties of the form
  var amt = form["Gift-Card Amount"].value;
  // Don't clear the value if it's not suitable, it's annoying
  // Let the user fix it themselves
  if (parseFloat(amt) != amt) {
    alert("Gift card amount is not a suitable value")
  }
  // Set the price
  form.price.value = amt * form.store.value;
}
</script>

示例表单，其中包含所有存储值。通过这种方式，您可以在服务器获取所有相关值的情况下进行回退，而不依赖于客户端计算。。

<form>
  Store:
  <select name="store" onchange="calcPrice(this)">
   <option value="0.90">McDonalds
   <option value="0.92">Target
  </select>
  <br>
  Gift card amount:
  <input name="Gift-Card Amount" onchange="calcPrice(this)">
  Price:
  <input name="price" readonly>
</form>

编写一个可以返回正确值的小函数

function retrieveStoreValue(store){
      return stores[store];
} // be sure stores is defined before the first call of this one

在你的变更函数中称之为

var storeName = jQuery(this).parents("form").find("input[name='name']").val();
var calc = parseFloat(this.value) * (retrieveStoreValue(storeName) );
相关文章：