如何将HTML表单输入转换为Javascript变量？

Question

我正在制作新游戏，我希望玩家输入游戏中的圈数，但是很难将变量从HTML设置为javascript。

我确定问题仅在于未正确设置'i'变量，因为替换了'document.getElementsByName（'circles'）。value;' 与任何数字工作正常。

<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>