JavaScript提示框未显示。

3

我正在尝试为一个班级创建一些代码,提示用户输入三个数字,然后对这些数字进行一些计算。数学运算是一个数字的平方,将数字乘以PI并将它们显示在适当的单元格中。现在我的onClick不起作用,用户没有看到提示。因为需要,我已经在其中放置了最小值和最大值函数。

以下是我的代码:

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>


现在我的onClick没有起作用。你的onClick函数在哪里? - cb64
我在复制和粘贴代码时忘记添加它了,我正在做一些尝试并暂时将其删除。它将放置在每个tr标题中,看起来像这样-- onClick="populateRow(this);" - John Kosmalski
4个回答

1
这似乎是一道家庭作业问题,因为你提到它是为了课程而做的,所以我不能给你确切的解决方案。然而,我会指出你代码目前存在的问题。
  1. 你提到你的 "onClick" 不起作用,但是在这段代码中你没有任何 onClick 函数。
  2. 你需要使用 window.prompt() 方法在 JS 中提示用户输入。
你需要创建一个按钮,让用户按下后能够收到警报。将事件监听器添加到此按钮上,以提示用户输入数字。您可以在 这里 获取帮助。在从提示中存储变量的数字之后,使用该变量执行不同的数学运算,并将其添加到表格中。

是的,我看了一遍但忘记了。我会把onClick放在开头的tds中。 - John Kosmalski
抱歉,每个块的TRS中都会有相应的翻译。 - John Kosmalski

0
你的提示代码中有多余的换行符,请按照以下方式更正你的代码:
function isNotANumber(NaN) {
    var isNotANumer = promptForAValidNumber("Please enter a valid number")
}

同时,您必须使用标准的提示方法:
https://www.w3schools.com/jsref/met_win_prompt.asp


1
这并没有解决提问者的问题,也没有解决问题。 - cb64

0

实际上,您需要添加事件监听器来监听单击事件。可能类似于

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

0
对我而言,答案是将JS文件的脚本标签放置在HTML body标签的末尾。
<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接