关于JavaScript的

img

img


弹窗能出来,但是里面不执行是什么问题,怎样制作像图一那样的,输入一个数字即可出现几个小方块

for循环里不用geshu.value,用gs

1.首先你不用gs 是不是因为gs是NaN,因为你gs赋值的时候,用户还没输入,所以会这样,你不如把gs赋值放在点击事件里面,加个判断,如果空,怎么样,不是空就生成正方形.
2.我觉得gs的赋值我觉得使用parseFloat方法更好,谁会在个数加小数呢,加字符串的比较多吧.
3.以下是我的方法,,使用的是代码 片段,我也是刚学,希望帮到你

  button {
            padding: 3px;
        }

        .square {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 5px;
        }

 <label for="geshu">输入你想生成的正方形个数</label><input type="text" id="geshu"> <button>确定</button>
    <div class="box">

    </div>
 var box = document.querySelector(".box");
    var qued = document.querySelector("button");
    var geshu = document.querySelector("[type='text']");
    
    qued.onclick = function () {
// 务必放在此处,增加用户体验,否则不刷新再次点击确定时,会增加对应个数,而不是显示
  var squareStr = ``;
// 只提取数字部分
        var gs = parseFloat(geshu.value);
        for (var i = 0; i < gs; i++) {
            squareStr += `
            <div class="square"></div>
            `;
        }
        box.innerHTML = squareStr;

    }

我没有加判断,如果你想更精准,可以加判断,判断用户是否输出,或者是否输入了含有规范的值