Uncaught Syntax errors on html

Viewed 184

I was trying to build a web page with Google sign In authentication integrated on it. I have my index.html and my app.js file that is always called whenever the login is successful. I keep getting this Uncaught syntax errors for reasons I don't know and can anyone help me.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="Front-End for Bootstrap Tutorial" />
    <meta name="author" content="CSE 216 Student Name Goes Here" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />


    <title>Super Deuper Epic App</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
    </script>
    <script>
        function start() {
      gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
          client_id: '937584788497-tpt2bujc0dbi8g3a8808b1ssc83c1657.apps.googleusercontent.com',
          fetch_basic_profile: false,
               scope: 'profile'
        });
      });
    }
      </script>
    <script src="jquery.min.js"></script>
    <script src="handlebars.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="templates.js"></script>
    <!-- <script src="app.js"></script> -->

    <link href="https://fonts.googleapis.com/css?family=Fresca" rel="stylesheet">
    <link rel="stylesheet" href="app.css" />
    <link href="bootstrap.min.css" rel="stylesheet">

</head>

<body>
        
        <div id="my-signin2"></div>
        <button id="sign-out" onclick="signOut()">Sign Out</button>
        <script>
          function renderButton() {
          gapi.signin2.render('my-signin2', {
            'scope': 'profile email',
            'width': 240,
            'height': 40,
            'longtitle': true,
            'theme': 'dark',
          });
            $('#sign-out').attr('style', 'display: none');
          }
          $('#my-signin2').click(function() {
            // signInCallback defined in step 6.
            auth2.grantOfflineAccess().then(signInCallback);
          });
          
        </script>
        <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
        <script>
          var script = document.createElement('script');
          script.src = 'app.js';
          function signOut(){
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.signOut().then(function(){
              $('#my-signin2').attr('style', 'display: block');
              $('#sign-out').attr('style', 'display: none');
              history.go(-1);
              console.log('User logged out');
            })
          }
                function signInCallback(authResult) {
                  if (authResult['code']) {
                    // Hide the sign-in button now that the user is authorized, for example:
                    $('#my-signin2').attr('style', 'display: none');
                    
                    // Send the code to the server
                    $.ajax({
                      type: 'POST',
                      url: 'https://super-deuper-epic-app.herokuapp.com/',
                      // Always include an `X-Requested-With` header in every AJAX request,
                      // to protect against CSRF attacks.
                      headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                      },
                      contentType: 'application/octet-stream; charset=utf-8',
                      success: function(result) {
                        console.log("Result is:" + result);
                        document.body.appendChild(script);
                        $('#sign-out').attr('style', 'display: block');
                          
                        // Handle or verify the server response.
                      },
                      processData: false,
                      data: authResult['code']
                    });
                  } else {
                      console.log("Error");
                      
                    // There was an error.
                  }
                }
                </script>
            

</body>

</html>

The weirdest part is it used to work, like fullly with the sign in integrated in it and sign out and everything, but the next day, when I run it without changing the code, I got these errors:

(index):19 Uncaught SyntaxError: Unexpected identifier - function start() {
(index):46 Uncaught SyntaxError: missing ) after argument list
- $('#sign-out').attr('style', 'display: none');
(index):49 Uncaught SyntaxError: Unexpected identifier
- function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 40,
'longtitle': true,
'theme': 'dark',
});
}
(index):66 Uncaught SyntaxError: Unexpected identifier -  var script = document.createElement('script');

​

1 Answers

I think same code is working for me I have fixed some syntax issue nothing else

enter image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="Front-End for Bootstrap Tutorial" />
    <meta name="author" content="CSE 216 Student Name Goes Here" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Super Deuper Epic App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
    <script src="jquery.min.js"></script>
    <script src="handlebars.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="templates.js"></script>
    <!-- <script src="app.js"></script> -->
    <link href="https://fonts.googleapis.com/css?family=Fresca" rel="stylesheet">
    <link rel="stylesheet" href="app.css" />
    <link href="bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id="my-signin2"></div>
    <button id="sign-out" onclick="signOut()">Sign Out</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $('#sign-out').attr('style', 'display: none');
    </script>
    <script>
        function start() {
            gapi.load("auth2", function () {
                auth2 = gapi.auth2.init({
                    client_id: '937584788497-tpt2bujc0dbi8g3a8808b1ssc83c1657.apps.googleusercontent.com',
                    fetch_basic_profile: false,
                    scope: 'profile'
                });
            });
        }

        function renderButton() {
            gapi.signin2.render('my-signin2', {
                'scope': 'profile email',
                'width': 240,
                'height': 40,
                'longtitle': true,
                'theme': 'dark',
            });
        }
        $('#my-signin2').click(function () {
            auth2.grantOfflineAccess().then(signInCallback);
        });
    </script>
    <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
    <script></script>
</body>
</html>

Related