javascript - 根据用户选择问题实时更新

Question

我正在尝试根据用户选择创建动态价格字段。不幸的是，我不确定为什么我的代码不起作用。当我选择字段时没有显示任何内容

这是我的 javascript 文件的内容。基本上我有三个函数，其中两个函数根据下拉选择获取输入，最后一个函数是检查复选框是否被选中并将该值添加到总数中。

我检查了所有 ID，但没有发现错误。这是我的 html 表单，其中包含我试图获取数据的三个字段。

var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Regular Domestic Cleaning"] = 12;

var filling_durations = new Array();
filling_durations["None"] = 0;
filling_durations["8 hours"] = 8;

//custom calculations
function getServiceType() {
  var servicePrice = 0;
  var bookingForm = document.forms["submit-property-form"];
  var selectedFilling = bookingForm.elements["type"];
  servicePrice = filling_prices[selectedFilling.value];
  return servicePrice;
}

function getServiceDuration() {
  var servicePriceDuration = 0;
  var bookingForm = document.forms["submit-property-form"];
  var selectedFilling = bookingForm.elements["location"];
  servicePriceDuration = filling_durations[selectedFilling.value];
  return servicePriceDuration;
}

function getDetergentsPrice() {
  var featuresPrice = 0;
  var theForm = document.forms["submit-property-form"];
  var addDetergents = theForm.elements["feature-"];
  if (addDetergents.checked == true) {
    detergentsPrice = 6;
  }
  return detergentsPrice;
}

function getTotal() {
  var bookingTotalPrice = (getServiceType() * getServiceDuration()) + getDetergentsPrice();


  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price " + bookingTotalPrice;

}

<form id="submit-property-form" class="submission_form" enctype="multipart/form-data" method="post" novalidate="novalidate">
  <div class="book_form">

    <div class="fh_services">
      <label for="type">Service</label>
      <span class="selectwrap">
	        <select name="type" id="type" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
				<option selected="selected" value="-1">Select Service Type</option>
		        <option value="89"> Ironing</option>
				<option value="88"> One Off Cleaning</option>
				<option value="90"> Regular Domestic Cleaning</option>
		    </select>			
            </div>

            <div class="fh2_duration">
	         <label for="location">How many hours do you need us for?</label>
	         <span class="selectwrap">
	         <select name="location" id="location" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
		     <option value="any" selected="selected">Duration</option>
		     <option value="two-hours">2 hours</option>
	         </span>
    </div>

    <div class="fh1_features">
      <label>Features</label>
      <label for="feature-1"><span class="ch_title">Add Detergents (+£6)</span>
	         <input type="checkbox" name="features[]" id="feature-1" value="57">
             <span class="rh_indicator"></span>
	         </label>
    </div>

    <div id="totalPrice"></div>
  </div>
</form>

Answer 1

您提供的代码存在很多问题，但这是一个正常运行的版本。查看以下问题列表，并让我们知道哪些内容不清楚。这可能有助于使该问题对其他人更有用。

• 您有一个未闭合的跨度标签
• 您有一个未闭合的选择标签
• 您的 fillPrices 数组有 2 个索引，但用于选择它的选择有 4 个元素。
• 在 js 中访问 select 上的 .value 所获得的值是选项的 value 属性，因此您的键处于关闭状态。值为“90”​​的选项应该在数组中找到“定期家庭清洁” - 它们绝对不相等。
• fillingDurations 具有相同的不匹配 - 数组的键与选择选项中的值不匹配。这里有“两小时”作为索引，其中第一个选择的数字是 88 89 和 90，如果没有上下文，将很难调试。
• 您声明 featuresPrice，但随后尝试在 getDetergentsPrice 函数中设置洗涤剂价格。
• 没有任何东西触发总数的计算，所以我添加了一个按钮。

您还可以做一些小的清理工作:

• 在价格计算函数之外设置 bookingForm 一次
• 在进行数学计算之前，访问定价计算并将其单独存储在 getTotal 函数中。这使得故障排除变得更加容易，因为您可以在使用组件值之前轻松地将它们打印到日志中

var filling_prices= new Array();
    filling_prices[-1]=0;
    filling_prices[88]=10;
    filling_prices[89]=11;
    filling_prices[90]=12;
    

var filling_durations = new Array();
    filling_durations[-1]=0;
    filling_durations['two-hours']=8;

//custom calculations
function getServiceType() {
    var servicePrice = 0;
    var bookingForm = document.forms["submit-property-form"];
    var selectedFilling = bookingForm.elements["type"];
    servicePrice = filling_prices[selectedFilling.value];
    return servicePrice;
}

function getServiceDuration() {
    var servicePriceDuration = 0;
    var bookingForm = document.forms["submit-property-form"];
    var selectedFilling = bookingForm.elements["location"];
    servicePriceDuration = filling_durations[selectedFilling.value];
    return servicePriceDuration;
}
function getDetergentsPrice() {
var featuresPrice=0;
var theForm = document.forms["submit-property-form"];
var addDetergents = theForm.elements["features[]"];
if(addDetergents.checked==true)
{
    featuresPrice=6;
}
return featuresPrice;
}

function getTotal()
{
    var bookingTotalPrice = (getServiceType() * getServiceDuration()) + getDetergentsPrice();


    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price "+bookingTotalPrice;

}

 <form id="submit-property-form" class="submission_form" enctype="multipart/form-data" method="post" novalidate="novalidate">
       <div class="book_form">

        <div class="fh_services">
        <label for="type">Service</label>
        <span class="selectwrap">
        <select name="type" id="type" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
            <option selected="selected" value="-1">Select Service Type</option>
            <option value="89"> Ironing</option>
            <option value="88"> One Off Cleaning</option>
            <option value="90"> Regular Domestic Cleaning</option>
        </select> 
        </span>
        </div>

        <div class="fh2_duration">
         <label for="location">How many hours do you need us for?</label>
         <span class="selectwrap">
         <select name="location" id="location" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
         <option value="any" selected="selected">Duration</option>
         <option value="two-hours">2 hours</option>
         </select>
         </span>
        </div>

        <div class="fh1_features">
         <label>Features</label>
         <label for="feature-1"><span class="ch_title">Add Detergents (+£6)</span>
         <input type="checkbox" name="features[]" id="feature-1" value="57">
         <span class="rh_indicator"></span>
         </label>
        </div>

        <div id="totalPrice"></div>
       </div>
</form>

<a href="#" onclick="getTotal()" >total</a>