Javascript refusing to work

Question

Been trying to put together a test java script/html page to use into my main assessment task. After spending hours looking for the issue,seems like I can't find it.

Here's the code:

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

it should be printing a result but dosen't matter how many times I check it, Seems like I can't get it to work.

Maybe I'm missing something really big and I just can't pick up on it? could it be spacing? I really don't know.

Any help would be great thanks!

*Maybe i'm missing something really big* Yes, `java` is not the same as `javascript` — Scary Wombat, Oct 26 '17 at 06:28
@ScaryWombat One last annoying question my man. Just wanted to know if you mean to change the output line to a button type or all of the buttons. I don't really follow? — riley, Oct 26 '17 at 06:30
Only the `Get Price` button. `type="submit"` means that the form should be submitted to the server. — Barmar, Oct 26 '17 at 06:33
No, just that one. As it is a submit, it will bypass your function, unless you either change to a button **or** changed to `onsubmit="exercise1();` **note** there may be other errors — Scary Wombat, Oct 26 '17 at 06:33
maybe you need to ensure the script will run only when the document is ready? [check this](https://www.w3schools.com/jsref/event_onload.asp) or move all ur script to below ur html, after that follow what @ScaryWombat suggest? — Se0ng11, Oct 26 '17 at 06:39

score 2 · Answer 1 · answered Oct 26 '17 at 07:26

Next time one of these debugging tutorials might come in handy: Debugging in Chrome or Debugging in IE or Debugging in Firefox.

Note: parseInt returns NaN if it fails to convert a string to integer.

for example, Below code returns integer 5.

parseInt("5");

Below code returns NaN indicating the method's parameter is Not a Number.

parseInt("A");

PS: You might want to use this for textarea.

beliha · Answer 2 · 2017-10-26T07:44:04.313

1

First Things first: You don't have a starting html tag.
Second: Don't use a submit type input unless you want to post the form. In your case since the form has no action, the page is being reloaded everytime you click.

Change the input type to a

<a onclick="exercise1()">

or a

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

edited Oct 26 '17 at 07:44

answered Oct 26 '17 at 06:37

beliha

320
3
6

I do have an closing html tag. and a opening one. i think it just didn't copy over correctly – riley Oct 26 '17 at 06:52

score 0 · Answer 3 · answered Oct 26 '17 at 06:42

0

For select option document.getElementById is not working.

Please use the below option to get the value of select dropdown component.

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

answered Oct 26 '17 at 06:42

VinuBibin

679
8
19

You can refer this link for more ways to get the value of dropdown https://stackoverflow.com/questions/8140862/how-to-select-a-value-in-dropdown-javascript – VinuBibin Oct 26 '17 at 06:53

RaJesh RiJo · Accepted Answer · 2017-10-26T07:06:21.063

The only issue am seeing in your code is parseInt (document.getElementbyId('NumCars').value);, here getElementbyId is misspelled and it should be getElementById. And its working fine now. Check below snippet.

Update: replace input type="submit" to type="button" as you don't have a form submit.

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>

1

Thanks so much for your help! – riley Oct 26 '17 at 06:59

score 0 · Answer 5 · answered Oct 26 '17 at 06:56

Works for me now, check and let me know, there were some errors, I am mentioning them below:

document.getElementbyId('someId') was used, notice that you made an error by writing small 'b' instead of capital 'B'
Always try to put script after the body tag
Also the submit action function should return false or the form submit event should be prevented from happening, then only you will be able to stop the page refresh on form submission.

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

score -1 · Answer 6 · answered Oct 26 '17 at 06:36

-1

This if else construct is a bit ugly. May use an array for lookup, e.g.:

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

So then to get the cars price:

var price = prices[ cars ];

answered Oct 26 '17 at 06:36

Jonas Wilms

132,000
20
149
151

is great, but still, i don't see it is solving the issue that OP is facing – Se0ng11 Oct 26 '17 at 06:41
@se0ng11 may add your own answer? – Jonas Wilms Oct 26 '17 at 06:46

score -1 · Answer 7 · answered Oct 26 '17 at 06:49

-1

You need to replace script tag with

<script type="text/javascript">

answered Oct 26 '17 at 06:49

G. Rajdhar

1
3

No, that does not matter at all – Jonas Wilms Oct 26 '17 at 06:54
It works, you have to change "Id" attribute with "id". I should be lower-case in input box in "output" By changing the script tag with "type=text/javascript", you can see that the alert message triggers the price "alert(price); " – G. Rajdhar Oct 26 '17 at 07:06

Javascript refusing to work

7 Answers7