页面渲染时能否修改body标签内变量？青蛙主题乘法表实现咨询

你不需要在body渲染过程中修改内部变量，直接在点击按钮的触发逻辑中，拿到用户输入后动态更新页面DOM内容即可，修改后的完整代码如下：

修改后的HTML代码 #

<h1>输入正整数生成青蛙主题乘法表：</h1>
<input type="text" size="10" id="userInput"/>
<br>
<button onclick="doCalculations();">
  生成青蛙乘法表
</button>
<br>
<h2 id="frogResult">
</h2>

修改后的JS代码 #

function doCalculations() {
  // 获取用户输入并转为正整数
  const userInput = document.getElementById("userInput").value.trim();
  const timestable = parseInt(userInput);
  const resultArea = document.getElementById("frogResult");
  
  // 校验输入合法性
  if (isNaN(timestable) || timestable <= 0) {
    resultArea.innerText = "请输入有效的正整数";
    return;
  }
  
  // 生成10行乘法表内容
  let resultHtml = '';
  for (let i = 1; i <= 10; i++) {
    const frogStr = '🐸'.repeat(i);
    const calcResult = timestable * i;
    resultHtml += `${timestable} * ${frogStr} = ${calcResult}<br>`;
  }
  // 插入到页面
  resultArea.innerHTML = resultHtml;
}

实现说明 #

• 给原本用于展示乘法表的h2标签添加了唯一id frogResult，作为内容插入的目标容器
• 增加了输入合法性校验，避免非数字、负数等无效输入导致的逻辑错误
• 通过repeat方法生成对应数量的青蛙emoji，循环拼接10行乘法表内容后批量插入页面，性能优于逐行修改DOM

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