Javascript拒绝工作

时间：2017-10-26 06:26:36

标签： javascript html

尝试将测试java脚本/ html页面放在一起用于我的主要评估任务。花了几个小时寻找问题，似乎我找不到它。

以下是代码：

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="styles/purchases.css">
        <title>Home</title>
        <script language="javascript">

            function exercise1()
            {
                var discount = (document.getElementById('DiscountYes').checked);
                var cars = parseInt(document.getElementbyId('NumCars').value);
                var service = parseInt(document.getElementById('NumService').value);

                var price = 0;

                if ((cars >= 1) && (cars <= 10))

                {
                    if ((cars >= 1) && (cars <= 3))
                    {
                        price = 1000;
                    }

                    if ((cars >= 5) && (cars <= 8))
                    {
                        price = 4000;
                    }

                    if ((cars >= 9) && (cars <= 10))
                    {
                        price = 4000;

                    }

                    if (cars == 5)
                    {
                        price = 5000;
                    }

                    if (cars == 6)
                    {
                        price = 22500;
                    }

                    if (cars == 7)
                    {
                        price = 222500;
                    }

                    if (cars == 8)
                    {
                        price = 5000;
                    }

                    if (cars == 9)
                    {
                        price = 22500;

                    }

                    if (cars == 10)
                    {
                        price = 222500;
                    }

                    if (discount)
                    {
                        discount = 10;
                        price = (price) - (price / discount);
                    } else
                    {
                        price = price;
                    }

                }
                document.getElementById('output').value = "The cost is: $" + price;
                alert("Are these details correct?");

            }

        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="logo">

                </div>

                <div id="statement">
                    <h1>Computer Training Rooms</h1>
                </div>
            </div>

            <div id="links">
                <div class="links">
                    <span>
                        <a href="index.html"><img src="images/buttons/home.jpg" alt="home" class="button"></a> 
                    </span>
                    <span>
                        <a href="ethics.html"><img src="images/buttons/ethics.jpg" alt="ethics" class="button"></a>
                    </span>
                    <span>
                        <a href="resources.html"><img src="images/buttons/resources.jpg" alt="resources" class="button"></a>
                    </span>
                    <span>
                        <a href="purchases.html"><img src="images/buttons/purchases.jpg" alt="purchases" class="button"></a>
                    </span>
                    <span>
                        <a href="feedback.html"><img src="images/buttons/feedback.jpg" alt="feedback" class="button" class="button"></a>
                    </span>
                </div>

                <div Id="mainJava">
                    <form id ="dataForm" method="post">
                        <h3>Appying for Computer Rooms</h3>
                        <fieldset>
                            <legend>Cars</legend>

                            <label for="NumCars">Cars</label>
                            <select Id="NumCars" name="NumCars">

                                <option value="1">Commodore</option>
                                <option value="2">Ford</option>
                                <option value="3">Astra</option>
                                <option value="4">Adventra</option>
                                <option value="5">Patrol</option>
                                <option value="6">Landcriuser</option>
                                <option value="7">BMW 4WD</option>
                                <option value="8">Ranger</option>
                                <option value="9">MGB</option>
                                <option value="10">MGB GT</option>
                            </select>

                            <label for="NumService">Service Required:</label>
                            <select Id="NumService" name="NumService">
                                <option value="A">1500Km</option>                
                                <option value="B">5000Km</option>
                                <option value="C">10000Km</option>
                                <option value="D">20000Km</option>
                                <option value="E">50000Km</option>
                                <option value="F">120000Km</option>
                            </select>

                        </fieldset>

                        <table>
                            <tr>
                                <td>
                                    <fieldset class="right">
                                        <legend>Return Customer</legend>
                                        <label for="DiscountYes" Class="noborder">Yes</label>
                                        <input class="noborder" Id="DiscountYes" checked="checked" name="Return" type="checkbox" value="DiscountYes" />
                                    </fieldset>
                                </td>
                            </tr>
                        </table>
                        <br>

                        <input class="buttons" type="submit" Id="submit" value="Get Price" onclick="exercise1()"/>

                        <input class="buttons" type="reset" Id="reset" value="Reset"/> 

                        <input class="message" Id="output" type="textarea" value=" " />

                    </form>

                    <div id="rightImage">
                        <div id="rightTop">

                        </div>

                        <div id="rightbottom">
                        </div>
                    </div>
                </div>

                <div class="footer">                
                    <address>                           
                        <br>
                        Mailing Address:<br>         
                        Phone:<br>
                        <h6> &copy; Cert IV Possible Storyboard</h6>
                    </address>

                </div>              
            </div>              

    </body>

</html>

它应该打印一个结果，但不管我检查它多少次，好像我无法让它工作。

也许我错过了一些非常大的东西而我却无法接受它？可能是间距？我真的不知道。

任何帮助都会非常感谢！

7 个答案:

答案 0 :(得分：2)

下次其中一个调试教程可能会派上用场： Debugging in Chrome或Debugging in IE或Debugging in Firefox。

注意： parseInt 如果无法将字符串转换为整数，则返回 NaN 。

例如，

下面的代码返回整数5。

  

parseInt函数（＆＃34; 5＆＃34）;

以下代码返回 NaN ，表示方法的参数为 N a N 。

  

parseInt函数（＆＃34; A＆＃34）;

PS：您可能希望将this用于textarea。

答案 1 :(得分：1)

第一件事：你没有起始的html标签 第二：除非您要发布表单，否则不要使用提交类型输入。在您的情况下，由于表单没有操作，每次单击时都会重新加载页面。

将输入类型更改为

<a onclick="exercise1()">

或

<input type="button" onclick="exercise1()">.

答案 2 :(得分：0)

对于选择选项document.getElementById无效。

请使用以下选项获取选择下拉组件的值。

TYPES: BEGIN OF st_student,
        sid TYPE i,
        sname TYPE c LENGTH 8,
    END OF st_student.
DATA student TYPE st_student.

答案 3 :(得分：0)

我们在您的代码中看到的唯一问题是parseInt (document.getElementbyId('NumCars').value);，此处getElementbyId拼写错误且应为getElementById。它的工作正常。请查看下面的代码段。

更新：将输入type="submit"替换为type="button"，因为您没有提交表单。

＆＃13;
＆＃13; 
function exercise1() {
  var discount = document.getElementById('DiscountYes').checked;
  var cars = parseInt(document.getElementById('NumCars').value);
  var service = parseInt(document.getElementById('NumService').value);

  var price = 0;

  if ((cars >= 1) && (cars <= 10))

  {
    if ((cars >= 1) && (cars <= 3)) {
      price = 1000;
    }

    if ((cars >= 5) && (cars <= 8)) {
      price = 4000;
    }

    if ((cars >= 9) && (cars <= 10)) {
      price = 4000;

    }

    if (cars == 5) {
      price = 5000;
    }

    if (cars == 6) {
      price = 22500;
    }

    if (cars == 7) {
      price = 222500;
    }

    if (cars == 8) {
      price = 5000;
    }

    if (cars == 9) {
      price = 22500;

    }

    if (cars == 10) {
      price = 222500;
    }

    if (discount) {
      discount = 10;
      price = (price) - (price / discount);
    } else {
      price = price;
    }

  }
  document.getElementById('output').value = "The cost is: $" + price;
  alert("Are these details correct?");

}
＆＃13; 
<div id="wrapper">
  <div id="header">
    <div id="logo">
    </div>
    <div id="statement">
      <h1>Computer Training Rooms</h1>
    </div>
  </div>
  <div id="links">
    <div class="links">
      <span><a href="index.html"><img src="images/buttons/home.jpg" alt="home" class="button"></a></span>
      <span><a href="ethics.html"><img src="images/buttons/ethics.jpg" alt="ethics" class="button"></a></span>
      <span><a href="resources.html"><img src="images/buttons/resources.jpg" alt="resources" class="button"></a></span>
      <span><a href="purchases.html"><img src="images/buttons/purchases.jpg" alt="purchases" class="button"></a></span>
      <span><a href="feedback.html"><img src="images/buttons/feedback.jpg" alt="feedback" class="button" class="button"></a></span>
    </div>

    <div Id="mainJava">
      <form id="dataForm" method="post">
        <h3>Appying for Computer Rooms</h3>
        <fieldset>
          <legend>Cars</legend>
          <label for="NumCars">Cars</label>
          <select Id="NumCars" name="NumCars">
             <option value="1">Commodore</option>
             <option value="2">Ford</option>
             <option value="3">Astra</option>
             <option value="4">Adventra</option>
             <option value="5">Patrol</option>
             <option value="6">Landcriuser</option>
             <option value="7">BMW 4WD</option>
             <option value="8">Ranger</option>
             <option value="9">MGB</option>
             <option value="10">MGB GT</option>
             </select>
          <label for="NumService">Service Required:</label>
          <select Id="NumService" name="NumService">
             <option value="A">1500Km</option>               
             <option value="B">5000Km</option>
             <option value="C">10000Km</option>
             <option value="D">20000Km</option>
             <option value="E">50000Km</option>
             <option value="F">120000Km</option>
             </select>
        </fieldset>
        <table>
          <tr>
            <td>
              <fieldset class="right">
                <legend>Return Customer</legend>
                <label for="DiscountYes" Class="noborder">Yes</label>
                <input class="noborder" Id="DiscountYes" checked="checked" name="Return" type="checkbox" value="DiscountYes" />
              </fieldset>
            </td>
          </tr>
        </table>
        <br>
        <input class="buttons" type="button" Id="submit" value="Get Price" onclick="exercise1()" />
        <input class="buttons" type="reset" Id="reset" value="Reset" />
        <input class="message" Id="output" type="textarea" value=" " />
      </form>
      <div id="rightImage">
        <div id="rightTop">
        </div>
        <div id="rightbottom">
        </div>
      </div>
    </div>
    <div class="footer">
      <address>                          
                <br>
                Mailing Address:<br>         
                Phone:<br>
                <h6> &copy; Cert IV Possible Storyboard</h6>
            </address>

    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

现在为我工作，检查并告诉我，有一些错误，我在下面提到它们：

  • 使用了document.getElementbyId（'someId'），注意你写了小'b'代替大写'B'

    • 造成错误

  • 始终尝试将脚本放在正文标记

    • 之后
  • 此外，提交操作函数应该返回false或者应该阻止表单提交事件发生，然后只有您可以在表单提交时停止页面刷新。

[github gist] [https://gist.github.com/anonymous/e9e20d63bef91b9d9075e1589f5f7c4c]

答案 5 :(得分：-1)

这个if else构造有点丑陋。可以使用数组进行查找，例如：

const prices = [
  null, //theres no car 0
  1000, //price for car 1
  1000,
  1000,
  null,
  4000,
 /*...*/
];

然后获得汽车价格：

var price = prices[ cars ];

答案 6 :(得分：-1)

您需要将脚本标记替换为

<script type="text/javascript">
相关问题
最新问题