Question

我收到此错误“未捕获的类型错误：无法设置 null 的属性 'onclick' 在 index.html:73" 处，我似乎无法浏览它。请帮助解决这个问题，应该可以，当我单击下一步按钮时，会调出下一个表单，而在 chrome 调试选项中没有任何内容我注意到那个错误的地方。

<body>
    <div class="container">
        <form id="Form1">
            <h3>Create Account</h3>
            <input type="text" placeholder="Email" required>
            <input type="password" placeholder="Password" required>
            <input type="password" placeholder="Confirm Password" required>

            <div class="btn-box">
                <button type="button" id="Next1">Next</button>
            </div>
        </form>

        <form id="Form2">
            <h3>Social Links</h3>
            <input type="text" placeholder="Medium">
            <input type="text" placeholder="Github">
            <input type="text" placeholder="LinkedIn">

            <div class="btn-box">
                <button type="button" id="Back1">back</button>
                <button type="button" id="Next2">Next</button>

            </div>

        </form>

        <form id="Form3">
            <h3>Personal Info</h3>
            <input type="text" placeholder="First Name" required>
            <input type="text" placeholder="Last Name" required>
            <input type="text" placeholder="Mobile No." required>

            <div class="btn-box">
                <button type="button" id="Back2">back</button>
                <button type="Submit">Submit</button>

            </div>

        </form>

        <div class="step-row">
            <div id="progress"></div>
            <div class="step-col">Step 1</div>
            <div class="step-col">Step 2</div>
            <div class="step-col">Step 3</div>

        </div>

    </div>

    <script>
        var Form1 = document.getElementById(Form1);
        var Form2 = document.getElementById(Form2);
        var Form3 = document.getElementById(Form3);

        var Next1 = document.getElementById(Next1);
        var Next2 = document.getElementById(Next2);
        var Back1 = document.getElementById(Back1);
        var Back2 = document.getElementById(Back2);

        var progress = document.getElementById("progress");

        Next1.onclick = function() {
            Form1.style.left = "-450px";
            Form2.style.left = "40px";
            progress.style.width = "240px";
        }
        Back1.onclick = function() {
            Form1.style.left = "40px";
            Form2.style.left = "450px";
            progress.style.width = "120px";
        }
        Next2.onclick = function() {
            Form2.style.left = "-450px";
            Form3.style.left = "40px";
            progress.style.width = "360px";
        }
        Back2.onclick = function() {
            Form1.style.left = "40px";
            Form2.style.left = "450px";
            progress.style.width = "240px";
        }
    </script>
</body>
</html>

Answer 1

尝试以下操作：-

var Form1 = document.getElementById('Form1');
var Form2 = document.getElementById('Form2');
var Form3 = document.getElementById('Form3');

var Next1 = document.getElementById('Next1');
var Next2 = document.getElementById('Next2');
var Back1 = document.getElementById('Back1');
var Back2 = document.getElementById('Back2');

似乎无法解决这个问题

1 个答案: