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

問題は、あなたは、このようなFirebugのようなデバッグ・ツールを使用している場合、すなわちtoFixed()

これらのエラーを見つけることは容易である、定義されていない機能を使用している次のとおりです。

明確にするために、toFixedは関数ですが、Javascriptはゆるやかに型付けされていますが、指定された文脈ではtoFixedを文字列に適用していますこの文脈では、文字列を強制的に数値にすることはできません。

あなたはにあなたの最後の警告を変更することで、手動で指定する必要があります。そのような代わりにほかの（番号を格納）2つの文字列値を連結し、あなたのコード内の他のエラーがあることを

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>