javascript prompt not showing

Question

I am trying to create some code for a class that prompts the user to input three numbers then preforms some calculations to those numbers, the math is to square one number, multiply and multiply the number by PI then display them in the appropriate cells. Right now my onClick is not working and there is no prompt coming up for the user. I have the min and max functions in there so because it's required Here is my code:

function promptForNumber(promptString, min, max) {
  Array.prototype.max = function() {
    return Math.max.apply(null, this);
  };

  Array.prototype.min = function() {
    return Math.min.apply(null, this);
  };
}

function populateRow(row) {
  var number = promptForNumber("Enter your number");
  row.cells[0].innerHTML = number;
  row.cells[1].innerHTML = Math.pow(number, 2);
  row.cells[2].innerHTML = (number / Math.PI).toFixed(4);
}

function isNotANumber(NaN) {
  var isNotANumer = promptForAValidNumber("Please enter a 
    valid number ")
  }

table,
th,
tr,
td {
  border-collapse: collapse;
}

table {
  width: 80%;
  margin: 10%;
}

th {
  width: 33%;
  border: 2px solid black;
  justify-content: space-evenly;
  height: 25px;
  background-color: white;
}

td {
  border: 1px solid black;
  padding: 1%;
  text-align: center;
  background-color: greenyellow;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Assignment 2</title>
</head>

<body>
  <table>
    <tr>
      <th>Number</th>
      <th>Squared</th>
      <th>Divided by Pi</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

`Right now my onClick is not working` where is your onClick function? — cb64, Feb 20 '19 at 21:54
I forgot to add it when I copied and pasted the code, I was doing some playing around and removed it for a bit. It would go in each tr header and would look like this-- onClick="populateRow(this);" — John Kosmalski, Feb 20 '19 at 22:08

Nick · Answer 1 · 2019-02-20T22:26:34.367

1

This looks like a homework question as you mentioned it's for a class, so I cannot give you the exact solution to the problem. However, I will point out what is wrong with your code at the moment.

You mentioned that your "onClick" is not working, but you do not have any onClick functions in this code.
You need to use the window.prompt() method to prompt for user input in JS.

You need to create a button that the user can press to receive an alert. Add an event listener onto this button that prompts the user to enter a number. You can get help with this here. After you have the number from the prompt stored in a variable, use that variable to perform the different mathematical operations, and have these be added to the table.

edited Feb 20 '19 at 22:26

answered Feb 20 '19 at 21:58

Nick

1,392
1
13
20

Yeah, I read over that and forgot it. I would put onClick in the opening tds – John Kosmalski Feb 20 '19 at 22:00
Sorry, it would go in the trs of each block – John Kosmalski Feb 20 '19 at 22:01

score 0 · Answer 2 · answered Feb 20 '19 at 21:52

0

You have extra line in your prompt code, please correct your code like below:

function isNotANumber(NaN) {
    var isNotANumer = promptForAValidNumber("Please enter a valid number")
}

Also you must use standard method of prompt:
https://www.w3schools.com/jsref/met_win_prompt.asp

answered Feb 20 '19 at 21:52

Mohammadreza Yektamaram

1,392
16
36

1

This doesn't address OPs question nor does it solve the problem. – cb64 Feb 20 '19 at 21:56

score 0 · Answer 3 · answered Feb 20 '19 at 22:30

Infact you need to add the event listerner to listen for the click events. May something like

<html lang="en">
 <head>
    <title>Assignment 2</title>
     <style>
            table, th, tr, td {
                border-collapse: collapse;
            }
            table {
                width: 80%;
                margin: 10%;
            }
            th {
                width: 33%;
                border: 2px solid black;
                justify-content: space-evenly;
                height: 25px;
                background-color: white;
            }
            td {
                border: 1px solid black;
                padding: 1%;
                text-align: center;
                background-color: greenyellow;
            }
     </style>
    </head>
 <body>
   <table>
    <tr>
        <th>Number</th>
        <th>Squared</th>
        <th>Divided by Pi</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
  <script>
function promptForNumber(promptString, min, max) {
    Array.prototype.max = function() {
        return Math.max.apply(null, this);
    };

    Array.prototype.min = function() {
        return Math.min.apply(null, this);
    };
}

function populateRow(row) {
    var number = window.prompt("Enter your number");
    var cell = row.getElementsByTagName("td");
    cell[0].innerHTML = number;
    cell[1].innerHTML = Math.pow(number, 2);
    cell[2].innerHTML = (number / Math.PI).toFixed(4);

}

function isNotANumber(NaN) {
    var isNotANumer = promptForAValidNumber("Please enter a valid number")
}

var table = document.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
console.log('rows', rows);
for (let i = 0; i < rows.length; i++) {
    let currentRow = table.rows[i];
    currentRow.addEventListener("click", function() {

        populateRow(currentRow);

    })


};


 </script>
 </body>
 </html>

score 0 · Answer 4 · answered Jul 08 '22 at 17:32

For me, the answer was putting the script tag of the JS file at the end of the HTML body tag.

<body>
    <h1>Todo List</h1>
    <ul>
        <li>"new" - Add a Todo</li>
        <li>"list" - List all Todos</li>
        <li>"delete" - Remove specific Todo</li>
        <li>"quit" - Quit App</li>
    </ul>
    <script src="app.js"></script>
</body>

</html>

javascript prompt not showing

4 Answers4