JavaScript表单返回未定义

Question

So, I got this big piece of code, that should calculate some numbers and make them green, if right answer, and red, if wrong answer. 因此，我得到了这段大代码，应该计算一些数字，如果答案正确，则将它们变成绿色，如果答案错误，则将它们变成红色。

I'm using bootstrap, and wanna change class of some forms, so that they'll change color. 我正在使用引导程序，并且想要更改某些形式的类，以便它们会更改颜色。

I got a submit function, wich calculates the inpur of some forms. 我有一个Submit函数，可以计算某些形式的输入。 But they keeps being red when clicking the button, cause the forms returns undefined D: . 但是单击按钮时它们一直为红色，导致表单返回未定义的D：。

I'll appreciate every kinda help! 我将不胜感激！ (I'm despereate :3) （我绝望：3）

Sorry about code being long. 很抱歉，代码太长。

<!DOCTYPE html>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script src="js-src/signup.js"></script>

    <title>X Book</title>

    <style type="text/css">

        body {
            text-align:  center;

            overflow: hidden;
            margin: 0;
        }

        input {

            width: 25% !important;
        }

        #forms1 {

            margin-left: 35% !important;
        }

    </style>

    <script type="text/javascript">

        var label1, label2, label3, label4, label5;

        var res1, res2, res3, res4, res5;

        var op1, op2, op3, op4, op5;

        var dig1, dig2, dig3, dig4, dig5, dig6, dig7, dig8, dig9, dig10;

        var fail1, fail2, fail3, fail4, fail5;

        var input1, input2, input3, input4, input5;

        var rightCount;

        var startDate, endDate;

        var nameForm, mailForm;

        function genNumb() {

            label1 = document.getElementById('1');
            label2 = document.getElementById('2');

            dig1 = Math.floor((Math.random() * 25000) + 1);
            dig2 = Math.floor((Math.random() * 25000) + 1);

            dig3 = Math.floor((Math.random() * 25000) + 1);
            dig4 = Math.floor((Math.random() * 25000) + 1);

            op1 = Math.floor((Math.random() * 100) + 1);
            op2 = Math.floor((Math.random() * 100) + 1);


            res1;
            res2;

            label3 = document.getElementById('3');
            label4 = document.getElementById('4');

            dig5 = Math.floor((Math.random() * 25000) + 1);
            dig6 = Math.floor((Math.random() * 25000) + 1);

            dig7 = Math.floor((Math.random() * 25000) + 1);
            dig8 = Math.floor((Math.random() * 25000) + 1);

            op3 = Math.floor((Math.random() * 100) + 1);
            op4 = Math.floor((Math.random() * 100) + 1);

            res3;
            res4;

            label5 = document.getElementById('5');

            dig9 = Math.floor((Math.random() * 25000) + 1);
            dig10 = Math.floor((Math.random() * 25000) + 1);

            op5 = Math.floor((Math.random() * 100) + 1);

            res5;

            if (op1 < 50) {

                res1 = (dig1 - dig2);

                label1.innerHTML = dig1 + " - " + dig2 + " ="
            } else if (op1 > 50){

                res1 = (dig1 + dig2);

                label1.innerHTML = dig1 + " + " + dig2 + " ="
            }

            if (op2 < 50) {

                res2 = (dig3 - dig4);

                label2.innerHTML = dig3 + " - " + dig4 + " ="
            } else if (op2 > 50){

                res2 = (dig3 + dig4);

                label2.innerHTML = dig3 + " + " + dig4 + " ="
            }

            // le 3 other ones:

            if (op3 < 50) {

                res3 = (dig5 - dig6);

                label3.innerHTML = dig5 + " - " + dig6 + " ="
            } else if (op3 > 50){

                res3 = (dig5 + dig6);

                label3.innerHTML = dig5 + " + " + dig6 + " ="
            }

            if (op4 < 50) {

                res4 = (dig7 - dig8);

                label4.innerHTML = dig7 + " - " + dig8 + " ="
            } else if (op4 > 50){

                res4 = (dig7 + dig8);

                label4.innerHTML = dig7 + " + " + dig8 + " ="
            }

            if (op5 < 50) {

                res5 = (dig9 - dig10);

                label5.innerHTML = dig9 + " - " + dig10 + " ="
            } else if (op5 > 50){

                res5 = (dig9 + dig10);

                label5.innerHTML = dig9 + " + " + dig10 + " ="
            }

            /*$.post('plus-minus.php', {

                res1: res1,
                res2: res2,
                res3: res3,
                res4: res4,
                res5: res5
            });*/
        }

        function FuncTest() {

            alert("Yup");
        }

        window.onload = function() {

            nameForm = localStorage.getItem('nameForm');
            mailForm = localStorage.getItem('mailForm');

            startDate = new Date();
            genNumb();
        }

        function mySubmit() {

            /*$.get('plus-minus.php', function(res1x, res2x, res3x, res4x, res5x){

                res1 = res1x;
                res2 = res2x;
                res3 = res3x;
                res4 = res4x;
                res5 = res5x;

                alert(res1, res2, res3, res4, res5)
            });*/

            input1 = document.getElementById('input1');
            input2 = document.getElementById('input2');

            input3 = document.getElementById('input3');
            input4 = document.getElementById('input4');

            input5 = document.getElementById('input5');

            rightCount = 0;

            if (input1.value == res1) {

                rightCount =+ 1;

                input1.className = "form-group has-success has-feedback";
            } else {

                alert(input1.value);

                fail1 = input1;
                input1.className = "form-group has-error has-feedback";
            }

            if (input2.value == res2) {

                rightCount =+ 1;

                input2.className = "form-group has-success has-feedback";
            } else {

                fail2 = input2;
                input2.className = "form-group has-error has-feedback";
            }

            if (input3.value == res3) {

                rightCount =+ 1;

                input3.className = "form-group has-success has-feedback";
            } else {

                fail3 = input3;
                input3.className = "form-group has-error has-feedback";
            }

            if (input4.value == res4) {

                rightCount =+ 1;

                fail4 = input4;
                input4.className = "form-group has-success has-feedback";
            } else {

                input4.className = "form-group has-error has-feedback";
            }

            if (input5.value == res5) {

                rightCount =+ 1;

                input5.className = "form-group has-success has-feedback";
            } else {

                fail5 = input5;
                input5.className = "form-group has-error has-feedback";
            }

            endDate = new Date();

            postIt();

            return false;
        }

        function postIt () {

            $.post('sendmail.php', {

                startTime: startDate,
                endTime: endDate,

                fa2il1: fail1,
                fa2il2: fail2,
                fa2il3: fail3,
                fa2il4: fail4,
                fa2il5: fail5,

                result1: res1,
                result2: res2,
                result3: res3,
                result4: res4,
                result5: res5,

                teMail: mailForm,
                name: nameForm,

                rightC: rightCount,
            });
        }

    </script>

</head>
<body>

    <div class="page-header">
        <h1>
            <small>X Book - Plus N' Minus</small>
        </h1>
    </div>
    <div class="page-header" id="forms1">

        <form class="form-horizontal" role="form">
            <div class="form-group" id="input1">
                <label oncopy="return false;" for="task1" class="col-sm-2 control-label" id="1"></label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" placeholder="Answer here" name="inp1" id="inp1">
                </div>
            </div>
            <div class="form-group" id="input2">
                <label oncopy="return false;" for="inputPassword3" class="col-sm-2 control-label" id="2"></label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" placeholder="Answer here">
                </div>
            </div>

            <div class="form-group" id="input3">
                <label oncopy="return false;" for="task1" class="col-sm-2 control-label" id="3"></label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" placeholder="Answer here">
                </div>
            </div>
            <div class="form-group" id="input4">
                <label oncopy="return false;" for="inputPassword3" class="col-sm-2 control-label" id="4"></label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" placeholder="Answer here">
                </div>
            </div>
            <div class="form-group" id="input5">
                <label oncopy="return false;" for="inputPassword3" class="col-sm-2 control-label" id="5"></label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" placeholder="Answer here">
                </div>
            </div>
        </form>
    </div>

    <div id="footer" class="container">
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="navbar-inner navbar-content-center">
                <p class="text-muted credit">Nonprofit virtual mathbook, X Book - by <a href="http://www.nilq-folio.com">Nilq</a>. For people who wanna learn by them selves.
            </div>
        </nav>
    </div>

    <input type="button" class="btn btn-default btn-lg" id="submit" onclick="return mySubmit();" action="sendmail.php" data-toggle="modal" data-target="#signupModal" value="Submit">
    </input>
            <!-- Modal -->
    <div id="signupModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Sent</h4>
                </div>
                <div class="modal-body">
                    <h5>Task details was sent to your teacher!</h5>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
    </div>

</body>

Answer 1

You cannot have a numeric ID. 您不能有数字ID。 Add letters to it, like id="lbl1" instead of id="1" . 向其添加字母，例如id="lbl1"而不是id="1" 。

And you should make these changes (replace input1 with inp1 , etc...): 您应该进行以下更改（将input1替换为inp1等）：

input1 = document.getElementById('inp1');
input2 = document.getElementById('inp2');
input3 = document.getElementById('inp3');
input4 = document.getElementById('inp4');
input5 = document.getElementById('inp5');

input1 , input2 are divs, inp1 , inp2 are inputs ... input1 ， input2是div， inp1 ， inp2是输入...

JavaScript表单返回未定义

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-23 10:25:09

JavaScript表单返回未定义

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-23 10:25:09

解决方案1
0 已采纳 2014-10-23 10:25:09