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 Andrew McCombs
Andrew McCombs
4,309 Points

Code SyntaxError - Help Please

Okay on my website I have a login and password field that uses Email and a Password.

Okay this is the issue When I click the email field this line of code throws this error in the console log Uncaught SyntaxError: Unexpected Token } on this line

<input type="password" name="password" onfocus="emptyElement("status")" maxlength="16" class="inputHeader" id="password" value="" autocomplete="off" placeholder="Password">

and then when I click on the password field throws this error in the console log Uncaught SyntaxError: Unexpected Token } on this line

<button type="submit" id="loginbtn" onclick="login()" class="btn btn-red btn-red-sm">Log In</button>

Here is all the code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="/css/main.css"><title>Home</title>
</head>
<body>
<script>
function emptyElement(x){
    _(x).innerHTML = "";
}

function login(){
    var e = _("email").value;
    var p = _("password").value;
    var status = _("status");
    if(e == "" || p == ""){
        status.innerHTML = "Fill out all of the form data";
    } else {
        _("loginbtn").style.display = "none";
        status.innerHTML = 'please wait ...';
        var ajax = ajaxObj("POST", "login.php");
        ajax.onreadystatechange = function() {
            if(ajaxReturn(ajax) == true) {
                if(ajax.responseText == "login_failed"){
                    status.innerHTML = "Login unsuccessful, please try again.";
                    _("loginbtn").style.display = "inline-block";
                } else {
                    window.location = "/members/";
                }
            }
        }
        ajax.send("e="+e+"&p="+p);
    }
}
</script>
<div id="container">
        <header>
        <div id="main_header">
            <div id="rightAlign">
                <?php 
                if ($user_ok === false && empty($log_username)) {?><script>
                    $(document).ready(function(){
                        document.body.style.paddingTop="3px";
                    });</script><?php
                    echo '<form id="loginform" onsubmit="return false">
                        <span class="error-alarts" id="status"></span>
                        <input type="email" name="email" onfocus="emptyElement("status")" maxlength="88" class="inputHeader" id="email" value="" autocomplete="off" placeholder="Email">
                        <input type="password" name="password" onfocus="emptyElement("status")" maxlength="16" class="inputHeader" id="password" value="" autocomplete="off" placeholder="Password">
                        <button type="submit" id="loginbtn" onclick="login()" class="btn btn-red btn-red-sm">Log In</button>
                    </form>';
                } else {
                    echo '<span class="profile-link"><a href="/' . $log_username . '">' . $log_username . '</a></span>';
                }
                ?>
            <a href="http://www.bettergamerzunited.com">
                <img src="/images/BetterGamerzUnited-TextLogo.png" alt="logo">
            </a>
        </div>
    </header>

    <span class='pull-right text-danger' id="status"></span>    <section id="main_section">
        <section id="main_content">
            <div id="homepage-lft">
                <ul>
                    <li class='item-join'><a href="recruitment/">Join Us</a></li>
                    <li class='item-servers'><a href="#">Servers</a></li>
                    <li class='item-forums'><a href="#">Fourms</a></li>
                    <li class='item-store'><a href="#">Store</a></li>
                    <li class='item-contact'><a href="#">Contact Us</a></li>
                </ul>   
            </div>
            <div id="homepage-rgt">
                <div id="banner"><img src="images/BGU-Banner.png"></div>
                <!-- <div class="placeholder" style="height:408px; width:870px;">IMGAGE</div> -->
                <div id='clear' style="clear:both;"></div>
                <div id="thumb-lft">
                    <h2 class="titles">Latest News</h2>
                </div>
                <div id="thumb-rgt">
                    <h2 class="titles">News</h2>
                </div>
            </div>
        </section>
    </section>
    </div>
<footer>
</foorer>
<script src="/js/bootstrap.js"></script>
<script src="/js/main.js"></script>
<script src="/js/ajax.js"></script>
<script src="/js/autoscroll.js"></script>
<script src="/js/expand-retract.js"></script>
<script src="/js/fade.js"></script>

</body>
</html>

If you want to go look for yourself the website is www.bettergamerzunited.com

Just click in the email and the password field and check your consol

1 Answer

Kim Cowart
Kim Cowart
32,918 Points
Kim Cowart
Kim Cowart
32,918 Points

Hey Andrew,

I noticed your closing footer tag is misspelled.

Andrew McCombs
Andrew McCombs
4,309 Points

Ill fix that, but I just posted the problem. I accidentally hit the wrong button

Andrew McCombs
Andrew McCombs
4,309 Points

What do you mean? Unusual Location?

<script>

$(document).ready(function(){
       document.body.style.paddingTop="3px";
});

</script>

If I write it like this my problem is still there

<script>

$(document).ready(function(){
       document.body.style.paddingTop="3px";});

</script>
Kim Cowart
Kim Cowart
32,918 Points

Sorry about that, it was the way I was viewing your code. Seeing a curly brace before a parenthesis threw me off. My javascript is rusty but it seems to me that the error is being thrown by a curly brace syntax issue before the lines of script you highlighted are trying to execute. That's just a hunch at a glance tho. Sorry if it's not helping much right now.