用js實現一個九九乘法口訣表

王铁柱6發表於2024-11-24
JS
function multiplicationTable() {
  let table = "<table>";
  for (let i = 1; i <= 9; i++) {
    table += "<tr>";
    for (let j = 1; j <= i; j++) {
      table += `<td>${j} * ${i} = ${i * j}</td>`;
    }
    table += "</tr>";
  }
  table += "</table>";
  return table;
}

// Get the element where you want to display the table
const container = document.getElementById("multiplication-table"); 

// If the container exists, insert the table
if (container) {
  container.innerHTML = multiplicationTable();
} else {
  // Handle the case where the container element doesn't exist
  console.error("Element with id 'multiplication-table' not found.");

  // Alternatively, you could append the table to the body:
  // document.body.innerHTML += multiplicationTable(); 

  // Or display an alert:
  // alert(multiplicationTable().replace(/</g, "&lt;").replace(/>/g, "&gt;")); // Escape HTML tags for alert
}

Explanation and Improvements:

  1. multiplicationTable() function: This function generates the multiplication table HTML. It uses nested loops to iterate through rows and columns. The <= i condition in the inner loop ensures that only the necessary multiplications are displayed (e.g., only up to 1*1, 1*2, 2*2, etc.).

  2. <table>, <tr>, <td> tags: Proper HTML table tags are used to structure the table correctly.

  3. Template Literals: Using template literals (backticks ``) makes it easier to embed JavaScript expressions within the string, like ${j} * ${i} = ${i * j}.

  4. DOM Manipulation: The code now gets a reference to a container element with the ID "multiplication-table" using document.getElementById(). This is much better practice than directly inserting the table into the body. It allows you to place the table exactly where you want it in your HTML.

  5. Error Handling: The code includes a check to see if the container element exists. If it doesn't, it logs an error to the console. This helps with debugging. I've also included alternative ways to handle the missing element – appending directly to the body or displaying an alert. Choose the method that best suits your needs.

  6. HTML Escaping for Alerts (Optional): If you're using the alert() method as a fallback, the code now escapes HTML tags to prevent them from being interpreted as HTML.

How to Use:

  1. Create an HTML file: Create an HTML file (e.g., index.html).

  2. Add a container element: Include a container element where you want the table to appear:

    <!DOCTYPE html>
<html>
<head>
    <title>Multiplication Table</title>
</head>
<body>
    <div id="multiplication-table"></div>
    <script src="script.js"></script> </body>
</html>

  3. Add the JavaScript: Create a JavaScript file (e.g., script.js) and paste the JavaScript code into it.

  4. Link the JavaScript: Include the <script> tag in your HTML file to link the JavaScript file. Make sure the src attribute points to the correct path. It's best practice to put the <script> tag just before the closing </body> tag.

  5. Open the HTML file in a browser: Open the index.html file in your web browser. You should see the multiplication table displayed in the container you created.

This improved version is more robust, easier to use, and follows best practices for front-end development. Remember to choose the error handling method that best fits your project.

相關文章