Как превратить ввод HTML-формы в переменную Javascript?

Question

Я делаю новую игру, я хочу, чтобы количество кругов в игре было подсчитано игроком, но мне трудно установить переменную из HTML в javascript.

Я определил, чтопроблема заключается только в том, что переменная 'i' установлена ​​неправильно, поскольку она заменяет 'document.getElementsByName (' circle '). 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

Получить значение по идентификатору, не используя имена, и сделать тип ввода кнопкой, не отправляющей.

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>