按下提交按钮时没有显示答案答案

【问题标题】：asnwer not showing up when submit button is pressed按下提交按钮时没有显示答案
【发布时间】：2021-05-05 08:17:33
【问题描述】：

/*Create a special calculator that read a number from the user, checks that it is an integer and performs a series of mathematical calculations as listed:
calculates the number's factorial. A factorial is the product of an integer and all the integers below it; e.g., the factorial of 4 is equal to 24 (4 * 3 * 2 * 1).
Calculate the square and cube of the number. A number squared is a number that is multiplied by itself; e.g., 22 is equal to 4 (2 * 2). A number cubed is a number that is multiplied by itself twice e.g., 23 is equal to 8 (2 * 2 * 2). 
*/

// Function called when the form is submitted.
// Function performs the calculations and returns false.
function calculate() {
'use strict';
        // For storing the factorial, squared and cubed results:
        var factorial;
        var squared;
        var cubed;
        
          // Get references to the form value:
          var number = document.getElementById('number').value;
          
          // Add validation here later!
    
         // Calculate the factorial results:
         //HINT: the factorial of 0 is 1.
         *function factorial(number){*  **FACTORIAL IS ALREADY DEFINED**
         if (number <= 1) {
             return 1;
         }else{
             return number * factorial(number - 1);
}
         }
        factorial(number);       
         // Calculate the squared results: **MATH IS UNDEFINED**
        squared = *math*.pow(number, 2); 
         
          // Calculate the cubed results:
        cubed = *math*.pow(number,3 );
          
          
          //display factorial, squared and cubed results
        document.getElementById('factorial').value = factorial;
        document.getElementById('squared').value = squared;
        document.getElementById('cubed').value = cubed;
 
        
    // Return false to prevent submission:
    return false; 
    
}// End of calculate() function.

// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {**THIS SHOW AS UNUSED**
'use strict';
    // Add an event listener to the form:
    document.getElementById("calculate").onsubmit = calculate;

}  // End of init() function.

// Assign an event listener to the window's load event:

**1。 L23：阶乘已定义 2. L32,35：未定义变量 3. L51：init() 未使用 ** html 中的一切都是正确的，但是当我按下网页上的提交按钮时，容器中甚至没有显示任何值，一直在努力但仍然无法弄清楚

Here is my HTML code.
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link href="css/task1.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="container">
  <div class="header"><!-- end .header --></div>
  <div class="content">
    <h1>Front-end Development Scripting</h1>
    <h2>Portfolio Task 1: Simple Variables</h2>
    <form name="theForm" method="post" action="">
      <fieldset>
        <legend>Fancy Calculator</legend>
        <p>
          <label>
            Please enter anumbr between 0 and 50</label>
          <input type="number" name="number" id="number" value="0" min="1"  required>>
        </p>
        <p>
          <input type="submit" name="calculate" id="calculate" value="Calculate"></p>
          
        <p>
          <label>The Factorial of your number is:
            <input type="text" name="factorial" id="factorial">
          </label>
        </p>
        <p>
          <label>The square of your number is:
            <input type="text" name="squared" id="squared">
          </label>
        </p>
        <p>
          <label>The cube of your number is:
            <input type="text" name="cubed" id="cubed">
          </label>
        </p>
      </fieldset>
    </form>
<p>&nbsp;</p>
  <!-- end .content --></div>
  <div class="footer">
    <p>student name</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
  <script src="js/task1.js"></script>
</body>
</html>

我修复了 javascript 代码，但它仍然无法正常工作。你能看看我的 HTML 代码并告诉我在哪里修复它。

【问题讨论】：

你在哪里调用了init函数？你刚刚宣布了它。它是Math.pow() 而不是math.pow()。 Math 对象有大写 M

标签： javascript calculation

【解决方案1】：

我已经修复了你的代码。需要注意的一些事项：-

您对函数使用相同的名称，变量factorial。因此它显示factorial is already defined。
Math 对象有大写 M。或者，您也可以使用number**2 或number**3
您刚刚声明了 init 函数，但从未调用它。
您可以使用button 类型的输入并添加onclick 侦听器而不是onsubmit。

function factorial(number) {
  if (number <= 1) {
    return 1;
  } else {
    return number * factorial(number - 1);
  }
}

function calculate() {
  'use strict';
  // For storing the factorial, squared and cubed results:
  var factorialNum;
  var squared;
  var cubed;

  // Get references to the form value:
  var number = document.getElementById('number').value;

  // Add validation here later!

  // Calculate the factorial results:
  //HINT: the factorial of 0 is 1.
  
  factorialNum = factorial(number);
  // Calculate the squared results: 
  squared = Math.pow(number, 2);  //you can also do number**2

  // Calculate the cubed results:
  cubed = Math.pow(number, 3);   // number**3 


  //display factorial, squared and cubed results
  document.getElementById('factorial').value = factorialNum;
  document.getElementById('squared').value = squared;
  document.getElementById('cubed').value = cubed;


  // Return false to prevent submission:
  return false;

} // End of calculate() function.

// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
    'use strict';
  // Add an event listener to the form:
  document.getElementById("calculate").onclick = calculate;

}

init()

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link href="css/task1.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="container">
  <div class="header"><!-- end .header --></div>
  <div class="content">
    <h1>Front-end Development Scripting</h1>
    <h2>Portfolio Task 1: Simple Variables</h2>
    <form name="theForm" method="post" action="">
      <fieldset>
        <legend>Fancy Calculator</legend>
        <p>
          <label>
            Please enter anumbr between 0 and 50</label>
          <input type="number" name="number" id="number" value="0" min="1"  required>>
        </p>
        <p>
          <input type="button" name="calculate" id="calculate" value="Calculate"></p>
          
        <p>
          <label>The Factorial of your number is:
            <input type="text" name="factorial" id="factorial">
          </label>
        </p>
        <p>
          <label>The square of your number is:
            <input type="text" name="squared" id="squared">
          </label>
        </p>
        <p>
          <label>The cube of your number is:
            <input type="text" name="cubed" id="cubed">
          </label>
        </p>
      </fieldset>
    </form>
<p>&nbsp;</p>
  <!-- end .content --></div>
  <div class="footer">
    <p>student name</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
  <script src="js/task1.js"></script>
</body>
</html>

【讨论】：

如果遇到任何错误，请发表评论，因为没有 HTML 代码很难调试。
您好，感谢您的帮助，但仍然无法正常工作。你能看看我的 HTML 代码，请告诉我应该在哪里修复。
@ChanJiaXiang 我已经更新了我的答案。请看一看。
@ChanJiangiang 太棒了。如果可行，请点赞并将答案标记为已接受，以便将来对其他人有用。
他们还没有投票的声誉，但有一个投票:-)