如何用单个for循环实现JavaScript用户输入数字的升降序乘法表打印

你的代码里降序乘法表逻辑错误，因为直接复用了升序的num * i，导致输出和升序完全一致。另外每次点击按钮时没有清空之前的输出，会造成内容叠加。下面是修正后的代码：

修正后的JavaScript代码 #

function printTable() {
  const num = Number(document.getElementById("txtNumber").value);
  // 提前获取DOM元素，避免循环内重复查询
  const ascendingOdr = document.getElementById("ascendingOdr");
  const descendingOdr = document.getElementById("descendingOdr");
  
  // 清空之前的输出内容
  ascendingOdr.innerHTML = '';
  descendingOdr.innerHTML = '';

  for (let i = 1; i <= 10; i++) {
    // 升序：num * 1, num * 2 ... num *10
    ascendingOdr.innerHTML += num * i + "<br/>";
    // 降序：num *10, num*9 ... num*1，用11-i来反向获取乘数
    descendingOdr.innerHTML += num * (11 - i) + "<br/>";
  }
};

对应的HTML代码（保持原结构即可） #

<input type="text" id="txtNumber" placeholder="Enter number" /> 
<input type="button" value="Print Table." onclick="printTable()" />
<div style="display: flex;">
  <p id="ascendingOdr"></p>
  <p style="margin-left: 20px;" id="descendingOdr"></p>
</div>

关键修改点： #

• 降序计算改用num * (11 - i)：当i从1到10循环时，11 - i会得到10到1的反向乘数，刚好对应降序的乘法结果（比如输入5时，i=1得到510=50，i=10得到51=5）。
• 循环前清空容器内容：避免多次点击按钮时，新的乘法表叠加在旧内容后面。
• 把DOM元素查询移到循环外：减少不必要的DOM操作，提升代码性能。

内容的提问来源于stack exchange，提问作者RaJ SoNi