Javascript 拒绝工作

问题描述 投票：0回答：7

一直在尝试组合一个测试 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>

它应该打印结果，但不管我检查多少次，似乎我都无法让它工作。

也许我错过了一些非常重要的东西而我只是无法抓住它？可能是间距吗？我真的不知道。

任何帮助将非常感谢！

javascript html dom
7个回答
2
投票

下次这些调试教程之一可能会派上用场： 在 Chrome 中调试 或 在 IE 中调试 或 在 Firefox 中调试。

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

例如， 下面的代码返回整数 5。

parseInt("5");

下面的代码返回 NaN 表示该方法的参数是 Not a Nnumber。

parseInt("A");

PS：您可能想使用 this 作为文本区域。

1
投票

首先要做的事情：您没有起始 html 标签。
第二： 不要使用提交类型输入，除非您想发布表单。在您的情况下，由于表单没有任何操作，因此每次您单击时都会重新加载页面。

将输入类型更改为 

<a onclick="exercise1()">

或 

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

我在代码中看到的唯一问题是

parseInt (document.getElementbyId('NumCars').value);
，这里
getElementbyId
拼写错误，应该是
getElementById
。现在工作正常。检查下面的片段。

更新： 将输入 

type="submit"
替换为 
type="button"
，因为您没有提交表单。

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?");

}
<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>

0
投票

对于选择选项 document.getElementById 不起作用。

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

 var cars = parseInt (document.getElementsByName('NumCars')[0].value);
 var service = parseInt (document.getElementsByName('NumService')[0].value);
0
投票

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

    使用了

  • document.getElementbyId('someId')，请注意，您写了小写的 'b' 而不是大写的 'B'，从而犯了一个错误

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

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

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

-1
投票

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

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

那么要获取汽车价格：

var price = prices[ cars ];
-1
投票

您需要将 script 标签替换为 

<script type="text/javascript">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.