javascripthtmldom

Can't seem to fix this one

I am getting this error "Uncaught TypeError: Cannot set property 'onclick' of null at index.html:73" and I can't seem to navigate past through it. an help on this one please, it should, when I click button next bring up the next form instead there is nothing and in the chrome debug option that's where I noticed that error.

<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>
Solution

  • Try something like following:-

    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');