JavaScript帮助！脚本不工作

时间：2012-03-12 20:22:23

标签： javascript html

我正在尝试让这个脚本工作，但它在最后一次警报的某个地方失败了。该脚本应该从表单中提取所有内容，然后将结果作为警告框吐出。我很确定我的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>

2 个答案:

答案 0 :(得分：4)

问题是您使用的是未定义的函数，即toFixed()

如果使用Firebug等调试工具，很容易找到这些错误：

enter image description here

为了澄清，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));

请注意，代码中还有其他错误，例如连接两个字符串值（存储Numbers）而不是添加。

答案 1 :(得分：0)

我删除了一些错误：

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>
相关问题
最新问题