Question

由于某种原因，我无法获取通过此表单提交的信息。我尝试了很多东西，任何想法？

编辑：我添加了其余的代码。出于某种原因，它需要按两次提交按钮才能工作。有什么建议吗？

`

    <style>
        #movingBall {
        position: fixed;
        width:100px;
        height:100px;
        border-radius:200px;
        background-color:black;
        top:50%;
        visibility:hidden;
        left:50%;

        }
        #center{
        margin-left:40%;
        font-size:1.5em;
        }

    </style>
</head>
<body >
    <div id="movingBall"></div>

    <section id= "center">
        <form id="myForm" method="POST" onsubmit="startAnimation()">
        Color?
            <input type ="text" placeholder="#000000"></br>
            Direction?  
            <select name = "direction" style="width:174px">
                <option value="1">Left</option>
                <option value="2">Right</option>
                <option value="3">Up</option>
                <option value="4">Down</option>
            </select><br/>  
            <input type = "submit">
            <input type="button" value="stopper" onclick="stopAnimation()">
        </form>
    </section>
</body>

<script type='text/javascript'>
    var col, pos;
    var radius = 50;
    var x = 1000, y = 500;    
    var incrX =2, incrY=2;
    var timerId;
    form = document.getElementById("myForm");
    form.addEventListener("submit", function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
    col = document.forms[0][0].value;
    pos = document.forms[0][1].value;   

    });

    function startAnimation() {

        document.getElementById("movingBall").style.visibility="visible";
        document.getElementById("movingBall").style.backgroundColor=col;

        if (pos==1)
        {timerId = setInterval(updateAnimation,1);}
        else if (pos==2)
        {timerId=setInterval(updateAnimation2,1);}
        else if (pos==3)
        {timerId=setInterval(updateAnimation3,1);}
        else if (pos==4)
        {timerId=setInterval(updateAnimation4,1);}

    }


    function stopAnimation() {
        clearTimeout(timerId);
    }


    function updateAnimation() {

        x = x - incrX;
        var e = document.getElementById("movingBall");
        e.style.left=x+"px";

        if (x >= window.innerWidth - radius*2)
        {   
            incrX *=-1;
        }
        else if (x <=0)
        {
            incrX *=-1;
        }
    }

    function updateAnimation2() {

        x = x + incrX;
        var e = document.getElementById("movingBall");
        e.style.left=x+"px";

        if (x >= window.innerWidth - radius*2)
        {   
            incrX *=-1;
        }
        else if (x <=0)
        {
            incrX *=-1;
        }
    }
    function updateAnimation3() {

        y = y - incrY;
        var e = document.getElementById("movingBall");
        e.style.top=y +"px";

        if (y >= window.innerHeight -radius*2)
        {   
            incrY *=-1;
        }
        else if (y <=0)
        {
            incrY *=-1;
        }
    }

    function updateAnimation4() {

        y = y + incrY;
        var e = document.getElementById("movingBall");
        e.style.top=y +"px";

        if (y >= window.innerHeight -radius*2)
        {   
            incrY *=-1;
        }
        else if (y <=0)
        {
            incrY *=-1;
        }
    }

</script>

`

Answer 1

您的代码似乎很好，但该脚本标记将立即运行，如果您想要在提交时读取表单的值，您可以这样做：

http://jsfiddle.net/nhkph6ew/

倾听事件并执行您需要的任何操作......

form = document.getElementById("myForm");
form.addEventListener("submit", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var col = document.forms[0][0].value;
    var pos = document.forms[0][1].value;

    console.log(col);
    console.log(pos);
    form.submit();
});

使用javascript从表单中获取信息

1 个答案: