如何打开HTML表单输入到JavaScript变量？

Question

我正在做一个新的游戏，我想在游戏界的量由玩家inputed，但我有困难，从HTML设置变量转换为JavaScript。

我已确定，该问题仅仅依赖于没有被正确设定，“I”变量，因为替换“document.getElementsByName（”圆圈“）值;”。与任意数量的正常工作。

<div>
    <form>
        <input type="number" Name="circles" id = "circles" min="2" max="50" 
        value="2">
        <input type="submit">
    </form>
</div>

<div id="container">
    <canvas id="myCanvas" width="800" height="800">
    </canvas>
</div>

<script> 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = document.getElementsByName('circles').value;
for (i; i > 0; i= i-1) {
    ctx.beginPath();
    ctx.arc(Math.random()*c.width+1, Math.random()*c.height+1, 25, 0, 2 * 
    Math.PI);
    ctx.stroke();
}
</script>

我预计出现圆数是一样的给定值，而是没有任何反应。

Answer 1

通过ID获取价值不使用的名称，并输入类型按钮不要提交。

function a(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = document.getElementById('circles').value;
console.log(i)
for (i; i > 0; i= i-1) {
    ctx.beginPath();
    ctx.arc(Math.random()*c.width+1, Math.random()*c.height+1, 25, 0, 2 * 
    Math.PI);
    ctx.stroke();
}}

<div>
    <form>
        <input type="number" Name="circles" id = "circles" min="2" max="50"/>
        <input type="button" onclick='a()' value="Click"/>
    </form>
</div>

<div id="container">
    <canvas id="myCanvas" width="800" height="800">
    </canvas>
</div>