实时更新基于用户选择问题

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

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

• 您有一个未公开的范围标记
• 您有一个未关闭的选择标记
• 您的fillingPrices数组有2个索引，但用于选择它的select有4个元素。
• 在js中选择访问.value时获得的值是该选项的value属性，因此您的密钥已关闭。值为＆＃34; 90＆＃34;的选项应该找到＆＃34;定期国内清洁＆＃34;在数组中 - 它们绝对不相等。
• fillingDurations具有相同的不匹配 - 数组的键与select选项中的值不匹配。在这里你有两个小时＆＃34;作为第一个选择具有数字88 89和90的索引，如果没有上下文，将很难调试。
• 您声明featuresPrice，但然后尝试在getDetergentsPrice函数中设置detergentsPrice。
• 没有触发计算总数，所以我添加了一个按钮。

你可以做一些清理工作：

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

＆＃13;

＆＃13;

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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;