Ian Ian - 2 months ago 14
Javascript Question

Prompt function inside a jQuery object not working

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>

MJH MJH
Answer

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>