javascript - 使用 JS 通过选择和输入字段重置总值的问题

Question

我正在制作一个表单，要求用户输入购票时间偏好以及原籍国以确定税额。 (加利福尼亚州的税率与其他州不同)。税额适用于门票时间选择，从而给出门票的总金额。

第一行选择加利福尼亚州作为原产地，效果很好，但是当我更改州时，总金额不会改变。我不确定我哪里出错了。

<form action="">
      <label for="states">Choose your state:</label>
      <select
        name="states"
        id="selectState"
        onchange="getTax(this.value)"
      ></select
      ><br />
      <br />

      <label for="ticketTime">Select your ticket:</label>
      <br />
      <input
        type="radio"
        name="ticketTime"
        onclick="getTicketCost(this.value)"
        value="Morning"
      />Morning<br />
      <input
        type="radio"
        name="ticketTime"
        onclick="getTicketCost(this.value)"
        value="Afternoon"
      />Afternoon<br />
      <input
        type="radio"
        name="ticketTime"
        onclick="getTicketCost(this.value)"
        value="Night"
      />Night<br />
    </form>
    <p id="priceOfTicket"></p>

这是我写的 JavaScript:

//create array to hold values for dropdown
var states = [
      'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut',
      'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas',
      'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 
      'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon',
      'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 
      'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ];

var selectState = document.getElementById('selectState');
var contents;

//for loop append option to select tag
for (let i = 0; i < states.length; i++) {
   contents += '<option>' + states[i] + '</option>';
}

selectState.innerHTML = contents;

//function to get tax per state
 function getTax(state) {
   if (state === 'California') {
      tax = 0.06;
   } else {
       tax = 0.08;
   }
   return tax;
 }

 //function to calculate the cost of ticket
  function getTicketCost(ticketTime) {
    var morningTicket = 20;
    var afternoonTicket = 25;
    var nightTicket = 15;
    var ticketCost = 'Total price of ticket ';
    
    if (ticketTime === 'Morning') {
          totalCost = morningTicket * tax + morningTicket;
    } else if (ticketTime === 'Afternoon') {
          totalCost = afternoonTicket * tax + afternoonTicket;
    } else {
          totalCost = nightTicket * tax + nightTicket;
    }

    document.getElementById('priceOfTicket').innerHTML =
          ticketCost + '$' + totalCost;
  }

      

Answer 1

将 HTML 中 select 列表的 onchange() 事件处理程序更改为:

onchange="getTax(this.value);
getTicketCost(ticketTime.value);"

并且您还需要在 Javascript 中初始化 tax，以防用户在选择州之前选择门票类型(或者如果他们来自阿拉巴马州!)。

var tax = 0.08;

//create array to hold values for dropdown
var states = [
      'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut',
      'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas',
      'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 
      'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon',
      'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 
      'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ];

var selectState = document.getElementById('selectState');
var contents;
var tax = 0.08;

//for loop append option to select tag
for (let i = 0; i < states.length; i++) {
   contents += '<option>' + states[i] + '</option>';
}

selectState.innerHTML = contents;

//function to get tax per state
 function getTax(state) {
   if (state === 'California') {
      tax = 0.06;
   } else {
       tax = 0.08;
   }
   return tax;
 }

 //function to calculate the cost of ticket
  function getTicketCost(ticketTime) {
    var morningTicket = 20;
    var afternoonTicket = 25;
    var nightTicket = 15;
    var ticketCost = 'Total price of ticket ';
    
    if (ticketTime === 'Morning') {
          totalCost = morningTicket * tax + morningTicket;
    } else if (ticketTime === 'Afternoon') {
          totalCost = afternoonTicket * tax + afternoonTicket;
    } else {
          totalCost = nightTicket * tax + nightTicket;
    }

    document.getElementById('priceOfTicket').innerHTML =
          ticketCost + '$' + totalCost;
  }

<form action="">
      <label for="states">Choose your state:</label>
      <select
        name="states"
        id="selectState"
        onchange="getTax(this.value);
        getTicketCost(ticketTime.value);"
      ></select
      ><br />
      <br />

      <label for="ticketTime">Select your ticket:</label>
      <br />
      <input
        type="radio"
        name="ticketTime"
        onclick="getTicketCost(this.value)"
        value="Morning"
      />Morning<br />
      <input
        type="radio"
        name="ticketTime"
        onclick="getTicketCost(this.value)"
        value="Afternoon"
      />Afternoon<br />
      <input
        type="radio"
        name="ticketTime"
        onclick="getTicketCost(this.value)"
        value="Night"
      />Night<br />
    </form>
    <p id="priceOfTicket"></p>