Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Unsubscribed User
Unsubscribed User
8,167 Points

Page Keeps Reloading...with JavaScript

Here is my javascript code...its a form and the page keeps reloading when I put the cursor into one of the inputs..

        function designer() {
                    var div = document.getElementById("left");
                    div.innerHTML= '<img src="img/home/designer.jpg" alt="#" /><h2>DESIGNERS</h2>';
        }
        function designerLogin() {
                    var div = document.getElementById("left");
                    div.innerHTML= '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';               
        }
        function merchant() {
                    var div = document.getElementById("right");
                    div.innerHTML= '<img src="img/home/boutique.jpg" alt="#" /><h2>MERCHANTS</h2>';
        }
        function merchantLogin() {
                    var div = document.getElementById("right");
                    div.innerHTML= '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';               
        }
        function trend() {
                    var div = document.getElementById("middle");
                    div.innerHTML= '<img src="img/home/trend.jpg" alt="#" /><h2>TRENDSETTERS</h2>';
        }
        function trendLogin() {
                    var div = document.getElementById("middle");
                    div.innerHTML= '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';               
        }

</script>

Does anybody know what I did wrong?

2 Answers

Robert Willie
Robert Willie
804 Points
Robert Willie
Robert Willie
804 Points

Hi Justin,

Just very roughly consolidated this down (your form string is identical - so no need to paste it everywhere)

    var leftDiv = document.getElementById("left");
    var rightDiv = document.getElementById("right");
    var middleDiv = document.getElementById("middle");
    var form = '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';



    function designer() { 
                leftDiv.innerHTML= '<img src="img/home/designer.jpg" alt="#" /><h2>DESIGNERS</h2>';
    }
    function designerLogin() {
                leftDiv.innerHTML = form;               
    }
    function merchant() {
                rightDiv.innerHTML= '<img src="img/home/boutique.jpg" alt="#" /><h2>MERCHANTS</h2>';
    }
    function merchantLogin() {
                rightDiv.innerHTML= form ;               
    }
    function trend() {
                middleDiv.innerHTML= '<img src="img/home/trend.jpg" alt="#" /><h2>TRENDSETTERS</h2>';
    }
    function trendLogin() {
                middleDiv.innerHTML= form;
    }

Could actually make this even smaller too. Could you paste the complete page here? as I can't see anything in this that will cause the page to reload? Also - won't your designer and designerlogin etc overwrite each others html?

Rob

Unsubscribed User
Unsubscribed User
8,167 Points
Unsubscribed User
Unsubscribed User
8,167 Points

Here's the whole page minus two php includes

<div id="title" onmouseover="designer(); merchant(); trend();">Welcome</div>


<a href="#"><div id="left" onclick="designerLogin(); merchant(); trend();">
    <img src="img/home/designer.jpg" alt="#" />
    <h2>DESIGNERS</h2>
</div>
</a>


<a href="#"><div id="right" onclick="merchantLogin(); designer(); trend();">
    <img src="img/home/boutique.jpg" alt="#" />
    <h2>MERCHANTS</h2>
</div>
</a>

<a href="#">
<div id="middle" onclick="trendLogin(); designer(); merchant();">
        <img src="img/home/trend.jpg" alt="#" />
        <h2>TRENDSETTERS</h2>
</div>
</a>


function designer() {
                    var div = document.getElementById("left");
                    div.innerHTML= '<img src="img/home/designer.jpg" alt="#" /><h2>DESIGNERS</h2>';
        }
        function designerLogin() {
                    var div = document.getElementById("left");
                    div.innerHTML= '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';               
        }
        function merchant() {
                    var div = document.getElementById("right");
                    div.innerHTML= '<img src="img/home/boutique.jpg" alt="#" /><h2>MERCHANTS</h2>';
        }
        function merchantLogin() {
                    var div = document.getElementById("right");
                    div.innerHTML= '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';               
        }
        function trend() {
                    var div = document.getElementById("middle");
                    div.innerHTML= '<img src="img/home/trend.jpg" alt="#" /><h2>TRENDSETTERS</h2>';
        }
        function trendLogin() {
                    var div = document.getElementById("middle");
                    div.innerHTML= '<form method="post" action="merchant.php"><table><tr><th><label for="email">Email:</label></th><td><input id="email" type="text" name="email"></td></tr><tr><th><label for="password">Password:</label></th><td><input id="password" type="password" name="password"></td></tr></table><input id="login" type="submit" value="Login">   <input id="register" type="submit" value="or REGISTER"> </form>';               
        }

</script>

Sorry it's probably looks bad when I copy and paste it in here.