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

更改 onchange() select 的事件处理程序在 HTML 中列出:

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

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

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>