Prompt function inside a jQuery object not working

Question

Excuse me if I say something stupid here, I'm a bit of a noob at jQuery. I was working on a button in HTML/jQuery that is supposed to trigger a prompt when it was clicked, and then return another number. The problem is that the prompt doesn't trigger when I click on the button.

JavaScript:

$(document).ready(function() {
    $('#Progress-Button').click(function() {
        var question = prompt("Enter number of hours worked:", "Enter here");
        if (isNaN(Number(question)) === false) {
            var width = question * 10;
            return width;
        } else {
          question = prompt("That is not a number; Enter the number of hours worked.", "Enter here");
        }
    )
})

HTML:

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="index.js"></script>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
</html>
<head>
<title>Ian TEST</title>
</head>
<body>
<div id="main">
    <div id="Progress-BG"></div>
    <div id="Progress-Bar"></div>
    <button id="Progress-Button">Click Me</button>
</div> 
</body>

It gives a `ReferenceError: Can't find variable: $`. I included the CDN from google for jQuery. — Ian, Sep 26 '16 at 01:37
Possible duplicate of [ReferenceError can't find variable: $](http://stackoverflow.com/questions/4888725/referenceerror-cant-find-variable) — Dez, Sep 26 '16 at 01:39
You're missing a `}` to close your callback function inside of your `click` method call. Your issue is probably just due to this typo. I would expect you to be seeing an error like: "Uncaught SyntaxError: Unexpected token )" — nbrooks, Sep 26 '16 at 01:39
Ok, so I just check the file path for the CDN, and it shows up in Resources but still gives the reference error. I also fixed the typo, still nothing. — Ian, Sep 26 '16 at 01:44
PROBLEM SOLVED! I was using an outdated version of jQuery! TY everyone! — Ian, Sep 26 '16 at 01:51
Or not. still having the issue for some reason. I'm on Safari. — Ian, Sep 26 '16 at 01:52

score 1 · Answer 1 · answered Sep 26 '16 at 01:48

Your code is running smoothly, the only problem is you did not properly closed after the else

});

Try your code below

$(document).ready(function() {
  $('#Progress-Button').click(function() {
    var question = prompt("Enter number of hours worked:", "Enter here");
    if (isNaN(Number(question)) === false) {
      var width = question * 10;
      return width;
    } else {
      question = prompt("That is not a number; Enter the number of hours worked.", "Enter here");
    }
  });
})

score 0 · Accepted Answer · answered Sep 26 '16 at 01:45

Your else block is missing a curly brace, and some semicolons are missing as well. Try this:

$(document).ready(function() {
  $('#Progress-Button').click(function() {
    var question = prompt("Enter number of hours worked:", "Enter here");
    if (isNaN(Number(question)) === false) {
      var width = question * 10;
      alert(width);
      return width;
    } else {
      question = prompt("That is not a number; Enter the number of hours worked.", "Enter here");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="Progress-BG"></div>
    <div id="Progress-Bar"></div>
    <button id="Progress-Button">Click Me</button>
</div>

score 0 · Answer 3 · answered Sep 26 '16 at 01:48

Looks like you have some errors in your HTML, which are likely contributing to this. The <script>, <meta>, and <link> elements should be inside of <head>. Both <head> and <body> should be within <html>:

<html>
    <head>
        <title>Ian TEST</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="index.js"></script>
        <link rel="stylesheet" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
    </head>
    <body>
        <div id="main">
            <div id="Progress-BG"></div>
            <div id="Progress-Bar"></div>
            <button id="Progress-Button">Click Me</button>
        </div> 
    </body>
</html>

For some more details on the structure of an HTML document, have a look at this [W3 specification](https://www.w3.org/TR/html401/struct/global.html#h-7.1). — nbrooks, Sep 26 '16 at 01:51

score -4 · Answer 4 · answered Sep 26 '16 at 01:45

-4

You should use:

jQuery(document).ready(function($) {
   enter code here

Not this

$(document).ready(function() {
enter code here

...

answered Sep 26 '16 at 01:45

Quy Truong

413
3
9

Prompt function inside a jQuery object not working

4 Answers4