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;
}
我没有加判断,如果你想更精准,可以加判断,判断用户是否输出,或者是否输入了含有规范的值