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>

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

1 个答案: