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>