JavaScript的帮助！脚本不能正常工作

Question

我试图让这个脚本能够正常工作，但是它在最后一次警报的某个地方失败了。该脚本应该从表单中提取所有内容，然后将结果作为警告框进行吐出。我很确定我的html是正确的。

function calcServiceTotal() { 
var animalName = document.getElementById("name").value; 
var ownerName = document.getElementById("owner").value; 
var currentDate = document.getElementById("date").value; 
var choosenService = document.getElementById("service"); 
var serviceName = choosenService.options[choosenService.selectedIndex].text; 
var serviceCost = document.getElementById("value").value; 
var taxCost = serviceCost * 0.07; 
var totalCost = serviceCost + taxCost; 
if (animalName == null || animalName == "") 
    { 
    alert("Please give us your pet's name."); 
    return false; 
    } 
else if (ownerName == null || ownerName == "") 
    { 
    alert("Please give us your name."); 
    return false; 
    } 
else if (currentDate== null || currentDate == "") 
    { 
    alert("Please give us a date."); 
    return false; 
    } 
else 
    { 
    alert("Pet's Name:" + animalName + '\n' + "Owner's Name:" + ownerName + '\n' + "Service:" + choosenService + '\n' + "Cost: $" + serviceCost.toFixed(2) + '\n' + "Tax: $" + taxCost.toFixed(2) + "Total Cost:" + totalCost.toFixed(2)); 
    } 
} 

这里是相关的html代码。

<table width="339" border="0"> 
      <tr> 
      <td width="329"><strong>Patient Information</strong></td> 
      </tr> 
      <tr> 
      <td>&nbsp;</td> 
      </tr> 
      <tr> 
      <td>Name: &nbsp;&nbsp; 
      <label for="textfield"></label>  <input type="text" name="textfield" id="name" /></td> 
      </tr> 
      <tr> 
      <td>Owner: &nbsp; 
      <input type="text" name="textfield2" id="owner" /></td> 
      </tr> 
      <tr> 
      <td>Date: &nbsp;&nbsp;&nbsp; 
      <input type="text" name="textfield3" id="date" /></td> 
      </tr> 
      <tr> 
      <td>&nbsp;</td> 
      </tr> 
      <tr> 
      <td><strong>Services</strong></td> 
      </tr> 
      <tr> 
      <td>&nbsp;</td> 
      </tr> 
      <tr> 
      <td><form id="form1" name="form1" method="post"> 
       Select a Service: 
       <label for="select"></label> 
       <select name="select" id="service"> 
       <option>Basic Appointment - $50</option> 
       <option>Extended Appointment - $75</option> 
       <option>Vacination - $25</option> 
       <option>Grooming - $35</option> 
       <option>Bathing - $35</option> 
       </select> 
      </form></td> 
      </tr> 
      <tr> 
      <td>Service Fee (from above): &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <label for="textfield4"></label> 
       <input type="text" name="textfield4" id="value" /> 
      </td> 
      </tr> 
      <tr> 
      <td><form id="form2" name="form2" method="post" action=""> 
       <input type="button" onclick="calcServiceTotal();" name="button" id="button" value="calculate"/> 
      </form></td> 
      </tr> 
     </table> 

Answer 1

问题是你正在使用的不是定义的函数，即toFixed()

这是很容易，如果你使用的调试工具（如Firebug）找到这些错误：

为了澄清，toFixed是一个函数，但即使Javascript是松散类型，在它提供的上下文中，您正在将toFixed应用于字符串（为此罚款），在这种情况下，字符串不能被强制为一个数字。

您必须手动指定，通过改变你的最后警惕：

alert("Pet's Name:" + animalName + '\n' + "Owner's Name:" + ownerName + '\n' + "Service:" + choosenService + '\n' + "Cost: $" + Number(serviceCost).toFixed(2) + '\n' + "Tax: $" + Number(taxCost).toFixed(2) + "Total Cost:" + Number(totalCost).toFixed(2));

注意，还有其他的错误在你的代码，如连接两个字符串值（用来存储数字），而不是添加。

Answer 2

我删除了一些错误：

function calcServiceTotal() { 
    var animalName = document.getElementById("name").value; 
    var ownerName = document.getElementById("owner").value; 
    var currentDate = document.getElementById("date").value; 
    var choosenService = document.getElementById("service").value; 
    var serviceCost = Number(document.getElementById("value").value); 
    var taxCost = serviceCost * 0.07; 
    var totalCost = serviceCost + taxCost; 
    if (animalName == null || animalName == "") { 
     alert("Please give us your pet's name."); 
     return false; 
    } else if (ownerName == null || ownerName == "") { 
     alert("Please give us your name."); 
     return false; 
    } else if (currentDate== null || currentDate == "") { 
     alert("Please give us a date."); 
     return false; 
    } else { 
     alert("Pet's Name:" + animalName + '\n' + "Owner's Name:" + ownerName + '\n' + "Service:" + choosenService + '\n' + "Cost: $" + serviceCost.toFixed(2) + '\n' + "Tax: $" + taxCost.toFixed(2) + "Total Cost:" + totalCost.toFixed(2)); 
    } 


<table width="339" border="0"> 
    <tr> 
     <td width="329"><strong>Patient Information</strong></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Name: &nbsp;&nbsp; 
     <label for="textfield"></label>  <input id="name" type="text" name="textfield" id="name" /></td> 
    </tr> 
    <tr> 
     <td>Owner: &nbsp; 
     <input type="text" name="textfield2" id="owner" /></td> 
    </tr> 
    <tr> 
     <td>Date: &nbsp;&nbsp;&nbsp; 
      <input type="text" name="textfield3" id="date" /> 
     </td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><strong>Services</strong></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <form id="form1" name="form1" method="post"> 
       Select a Service: 
       <label for="select"></label> 
       <select name="select" id="service"> 
        <option value="Basic Appointment - $50">Basic Appointment - $50</option> 
        <option value="Extended Appointment - $75">Extended Appointment - $75</option> 
        <option value="Vacination - $25">Vacination - $25</option> 
        <option value="Grooming - $35">Grooming - $35</option> 
        <option value="Bathing - $35">Bathing - $35</option> 
       </select> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <td>Service Fee (from above): &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label for="textfield4"></label> 
      <input type="text" name="textfield4" id="value" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <form id="form2" name="form2" method="post" action=""> 
       <input type="button" onclick="calcServiceTotal();" name="button" id="button" value="calculate"/> 
      </form> 
     </td> 
    </tr> 
</table>