JavaScript实现DOM打印矩形提示str未定义如何解决

错误原因 #

• 变量作用域问题：str是你在myFunction函数内部声明的局部变量，函数外部的console.log(str)和DOM赋值语句无法访问，这是触发str未定义报错的根本原因
• 循环语法错误：外层for循环没有添加花括号，现有的str += "\n"只会在所有循环结束后执行一次，无法实现每行结束自动换行
• 换行符不兼容：HTML无法识别\n换行符，需要替换为<br>标签才能在页面正常展示换行效果
• 输入类型未处理：prompt返回值为字符串类型，转换为数字后再做循环判断可避免非预期逻辑错误
• 循环变量未声明：i和j未用let声明，会自动挂载为全局变量，存在变量污染风险
• 矩形生成逻辑错误：现有内层循环判断条件j < i生成的是直角三角形，要生成行列数匹配的矩形，需改为j < insertLine（n行n列正方形）

修复后完整代码 #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <p>Click the button to demonstrate the prompt box.</p>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
      <script>
        const myFunction = () => {
          let insertLine = Number(prompt("put the no. of lines Here: "));
          let str = "";
          for (let i = 0; i < insertLine; i++) {
            // 如需生成宽高不等的矩形，可新增prompt获取列数，替换下方insertLine即可
            for (let j = 0; j < insertLine; j++) {
              str += "*";
            }
            str += "<br>";
          }
          console.log(str);
          document.getElementById("demo").innerHTML = str;
        };
      </script>
    </div>
  </body>
</html>

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