我在用 Javascript 编写函数时遇到问题。答案

【问题标题】：I am having an issue writing a function in Javascript.我在用 Javascript 编写函数时遇到问题。
【发布时间】：2014-06-17 13:06:10
【问题描述】：

我整个学期都在学习 c++，但不知道如何编辑我的代码以使用函数运行，而不仅仅是编写 javascript 的方式。我需要为数学部分编写一个函数，以便它的输出出现在设计的总部分中。我的代码是：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>The Bean Counter</title> 
<style type="text/css">
         body {background-color : saddlebrown; color : darkorange; 
                   font-family : helvetica; text-align : center}
         table {margin-left : auto; margin-right : auto; text-align : center; 
                   background-color : #993300; border-style : solid;
                   border-color : firebrick; border-width : medium; padding : 8px }
   </style>
    </head> 
    <body> 
    <script type = "text/javascript"> 
       var shots = 1; 
       var drink = "none"; 
       var ounce = 0; 
    </script>
    <h1 style="color : white"> The Bean Counter</h1> 
    <hr style="width : 50%; color : darkorange  "/> 
    <p><b>Figuring the price of espresso drinks<br /> 
                so baristas can have time to chat</b></p> 
    <form action="" > 

    <table>
    <tr>
      <td>
        <input type="button" value="1" onclick='shots = 1'/>
      </td>
      <td>
        <input type="button" value="8oz" onclick='ounce = 8'/>
      </td>
      <td>
        <input type="button" value="    ESPRESSO    " onclick='drink = "espresso"'/>
      </td>
      <td>
        <input type="button" value="Clear" onclick=
             'shots = 1;
             drink = "none";
             ounce = 0;
             document.forms[0].price.value = "0.00"
           '/>
      </td>
    </tr>

    <tr>
      <td>
        <input type = "button" value="2" onclick = 'shots = 2'/>
      </td>
      <td>
        <input type = "button" value = "12oz" onclick = 'ounce = 12'/>
      </td>
      <td>
        <input type="button" value="      LATTE      " onclick='drink = "latte"'/>
      </td>
      <td>
      </td>
    </tr>

    <tr>
      <td>
        <input type = "button" value = "3" onclick = 'shots = 3'/>
      </td>
      <td>
        <input type = "button" value = "16oz" onclick = 'ounce = 16'/>
      </td>
      <td>
        <input type = "button" value = "CAPPUCCINO" onclick = 'drink = "cappuccino"'/>
      </td>
      <td>
        <input type = "button" value = "Total" onclick=
              ' var price; 
                var taxRate = 0.088; 

                if (drink == "espresso") 
                {
                    price = 1.40; 
                }

                if (drink == "latte" || drink == "cappuccino") 
                { 
                    if (ounce == 8) <!-- small -->
                    {
                        price = 1.95;
                    }
                    if (ounce == 12) <!-- medium -->
                    {
                        price = 2.35;
                    }
                    if (ounce == 16) <!-- large -->
                    {
                        price = 2.75;
                    }
                } 

                if (drink == "Americano") 
                {
                    price = 1.20 + .30 * (ounce/8);
                }

                price = price + (shots - 1) * .50; 
                price = price + price * taxRate; 
                document.forms[0].price.value = "$" + Math.round( price * 100 ) / 100;
           '/>
      </td>
    </tr>

    <tr>
      <td>
        <input type = "button" value = "4" onclick = 'shots = 4'/>
      </td>
      <td>
      </td>
      <td>
        <input type = "button" value = "  AMERICANO  " onclick = 'drink = "Americano"'/>
      </td>
      <td style="border-style : solid; border-width : medium; border-color : red">
        <input type="text" name = "price" value = "0.00" size = "5" onchange = ' '/>
      </td>
    </tr>
   </table>

   </form>

【问题讨论】：

那么，要获得有关 JavaScript 功能的帮助，您是否必须发布整个 HTML？
你的问题是……？
@PM77-1 "我在哪里可以学习javascript。"
你不能对此做任何事情。您已经在 HTML 属性中嵌入了整个 JavaScript 脚本！这确实是一种反模式。使用 SCRIPT 标签，你以后会感谢自己的。哦，其他人将能够阅读它。

标签： javascript function

【解决方案1】：

不要在你的 body 标签中使用所有的 JS，尝试创建一个函数：

function 很简单，如果你正确命名它们。您不能将大写字母作为第一个字母，也不能在函数中使用空格，以及其他特殊字符。函数名称中可以有 _ 下划线。函数名中也可以有数字，但和大写一样，它们不能是函数名的第一个字符。

以下是您创建上述函数的方法：

function nAm3() {

//can be any name you want, just follow those rules ^

}

所以这就是命名函数的全部内容。然而，打电话给他们是另一回事。您可以使用 HTML 或在 <script> 标记内调用函数。在<script> 标签内，您可以像这样调用函数：nAm3(); 然后代码将运行。函数仅在调用时运行。出于您的目的，您将需要正确使用的 onClick 事件处理程序。代替<body> 中的所有代码，让我们试试这个函数：

function nAm3() {
 var price; 
                var taxRate = 0.088; 

                if (drink == "espresso") 
                {
                    price = 1.40; 
                }

                if (drink == "latte" || drink == "cappuccino") 
                { 
                    if (ounce == 8) <!-- small -->
                    {
                        price = 1.95;
                    }
                    if (ounce == 12) <!-- medium -->
                    {
                        price = 2.35;
                    }
                    if (ounce == 16) <!-- large -->
                    {
                        price = 2.75;
                    }
                } 

                if (drink == "Americano") 
                {
                    price = 1.20 + .30 * (ounce/8);
                }

                price = price + (shots - 1) * .50; 
                price = price + price * taxRate; 
                document.forms[0].price.value = "$" + Math.round( price * 100 )
}

然后按照您的意愿调用它，只需放入您的 <input> 标签内：

<input onClick="nAm3()">

就这么简单！我不会涉及其他事件处理程序和函数使用，因为这既不是讲座也不是 wiki 页面，但我希望这些基本的函数知识对您的项目有所帮助！

【讨论】：

请注意，javascript不能存在于body标签中，只能存在于script标签中，但<script>标签也可以存在于body标签中。