Question

我是Js的新手，我在代码方面遇到麻烦。问题是当我将不同的方法相乘时，该程序将无法正常工作。但是，尽管有些方法完全相同，但其中一些方法仍在起作用。另一个问题是我必须先更改第一个选择，然后再更改另一个才能获得所需的总数。我希望获得一个总额，无论何时从下拉列表中选择任何选项，总金额都会改变，而与订购无关。我知道我在这里预见到一个错误，或者根本无法理解。请随时指出我的错误并帮助我改善代码，因为我知道它比应该的要复杂。谢谢您的帮助。

HTML

npm r build

Js

    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/scriptt.js "></script>
  </head>
  <body onload="hideTotal()">
    <form method="POST" class="device"/>
      <center class="all" >
        <div class= "data">
          <label class="req">Select The Device</label>
          <select  class="mydevice" id= "selectDevice" onChange="calculateTotal()">
            <option> None </option>
            <option  value="100" id='lg'> LG X CHARGE </option>
            <option  value="129"> ZTE MAX XL </option>
            <option  value="123"> LG DYNASTY </option>
            <option  value="400"> LG TRIBUTE </option>
          </select>

          <label for="For" class="req"> For </label>
          <select class="mydevice" id="port" onChange="calculateTotal()">
            <option id= 'none' value='none'> None </option>
            <option  id='port' value="129" >Port-In</option>
            <option class="upgrade">Upgrade</option>
            <option class="newAct">New Activation</option>

          </select>

        <label for="Plan" class="req">Plan</label>
          <select class="plan" id='plan' onChange="calculatedToral()">
            <option>None</option>
            <option value="35" >$35 plan</option>
            <option value="50">$50 plan</option>
            <option value="60">$60 plan</option>
          </select>

          <div class="access" >
            <label for="phoneInsurance"> Phone Insurance </label>
            <select class="myinsurance" id='insurance'  onChange="calculatedToral()">
              <option>None</option>
              <option value="7">Yes</option>
            </select>

          <label for="phoneCase"> Phone Case </label>
          <select class="mycases" id='case' onChange="calculatedToral()">
            <option>None</option>
            <option value="25">Regular</option>
            <option value="35">Wallet</option>
          </select>

          <label for="screenProtector"> Screen Protector </label>
          <select class="myscreen" id='screen' onChange="calculatedToral()">
            <option value="15">Yes</option>
            <option>No</option>
          </select>

        <center>
          <div id="total"></div>

Answer 1

HTML标记中的JS调用名称错误。

例如：您在以下情况中使用的是calculatedToral()而不是calculatedTotal()：

<select class="myinsurance" id='insurance'  onChange="calculatedToral()">
    <option>None</option>
    <option value="7">Yes</option>
</select>

正确检查所有名称。

此外，由于您是初学者，所以有一些脚注：

尝试避免内联脚本。（请参见this），即，请勿在HTML代码中混用javascript事件调用（例如onChange(), onClick()）。这将使代码将来难以阅读和更改。
尝试将所有Javascript放在<script>标记中（而不是内联脚本）（通常在页面末尾比较好）。使用.getElementsByClass()进行更广泛的控制，使用.getElementById()进行事件的精细控制。
此外，由于您使用的是jQuery，因此请在<script>的最后加上</body>，以调用jQuery CDN。

Answer 2

拼写
var insurance_prices = new Array（）; inusrance_prices [“ 7”] = 7;

功能或方法未定义 计算的Toral

var device_prices = new Array();
device_prices["100"]=100;
device_prices["129"]=129;
device_prices["123"]=123;
device_prices["400"]=400;

var port_prices = new Array();
port_prices["129"]=0.097;

var plan_prices = new Array();
plan_prices["35"]=35;
plan_prices["50"]=50;
plan_prices["60"]=60;

var insurance_prices = new Array();
insurance_prices["7"]=7;

var phone_case = new Array();
phone_case["25"] = 25;
phone_case["30"] = 30;

var screen_protector = new Array();
screen_protector["15"] = 15;

function getDevicePrice() {
    var deviceSelect = document.getElementById('selectDevice');
    //alert(device_prices[deviceSelect.value]);
    alert("1");
    return device_prices[deviceSelect.value];

}

function getPortPrice() {
    var portSelect = document.getElementById('port');
    alert("2")
    return port_prices[portSelect.value];
}

function getPlanPrice() {
    var planSelected = document.getElementById('plan');
    alert("3")
    return plan_prices[planSelected.value];
}

function getInsurancePrice() {
alert("4")
    var insurancee = document.getElementById('insurance');
    return insurance_prices[insurancee.value];
}
function getCasePrice() {
alert("5")
    var caseSelect = document.getElementById('case');
    return phone_case[caseSelect.value];
}
function getScreenPrice() {
alert("6")
    var screenSelect = document.getElementById('screen');
    return screen_protector[screenSelect.value];
}

function calculateTotal() {
alert("7")
        var total = getDevicePrice()*getPlanPrice()*getPortPrice();
        total = total.toFixed(2);
        var totalEl = document.getElementById('total');

        document.getElementById('total').innerHTML = "Your Total is: $" +        total;

        totalEl.style.display = 'block';

}
function calculatedToral()

{
alert("8")
}
function hideTotal() {
alert("9")
    var totalEl = document.getElementById('total');
    totalEl.style.display = 'none';
    }

我已更正了您的JavaScript的所有函数或方法，并且都正常工作（我在添加alert（）进行函数检查）。自己检查计算错误

某些方法有效，但并非全部

2 个答案:

此外，由于您是初学者，所以有一些脚注：