Uncaught SyntaxError：構文が正しくなくても、無効または予期しないトークン

ユーザー名を取得して、HTMLページのjavascriptを使用して別のページに誘導しようとしています。私は単にhereの方法に従っていますが、以下のコード行で構文エラーが発生しています。私はjQuery APIのドキュメントの構文をチェックし、それが正しいように見えます。誰もがなぜそれがエラーを投げているのをチェックできますか？また、送信ボタンをクリックした後にページをリダイレクトする必要がある場合は、正しい方向に向かいますか？Uncaught SyntaxError：構文が正しくなくても、無効または予期しないトークン

<!DOCTYPE html> 
<html> 
<head> 
<title>Login Page</title> 
<style type="text/css"> 
     html,body{height: 100%; padding:0; margin:0;} 
     form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; } 
     fieldset{ margin:0; border:0;padding:0;} 
     legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em; padding:0; } 
     label, label+ input {display:inline; float:left;margin-top:1em;} 
     label{text-align: right; width:28%; clear: left; margin-top:.8em; } 
     label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset; margin-left: } 
     #sub{ margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%} 
</style> 
</head> 
<body> 

    <form > 
     <fieldset><legend>My Login</legend> 
      <label for="name">UserName: </label><input type="text" name="username" id="username" value=""> 
      <label for="password">Password: </label><input type="password" name="password" id="password" > 
      <input type="button" name="theButton" value="Submit" class="btn" data-username="username" /> 
     </fieldset> 
    </form> 

<script> 

console.log("Am I present?"); 

$(document).on('click', '.btn', function() { 

    console.log("Am I Inside?"); 

    var name = $(this).data('username');   
    if (name != undefined && name != null) { 
     window.location = 'http://localhost/local/RegistryWS/src/main/webapp/home.html?username=' + name; 
    } 
});// Getting Syantax error here at developers console 



</script> 


</body> 
</html>

出典

2016-12-01 John

あなたは、ドキュメントにjQueryライブラリをロードしていないようです：

が頭にこれを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

以下はその変更を伴うだけで、既存のコード（としてです同様に、文書作成可能なラッパーでクリック機能をラップする）、それはエラーではなく、ボタンをクリックしてメッセージを操作します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Login Page</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style type="text/css"> 
 
     html,body{height: 100%; padding:0; margin:0;} 
 
     form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; } 
 
     fieldset{ margin:0; border:0;padding:0;} 
 
     legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em; padding:0; } 
 
     label, label+ input {display:inline; float:left;margin-top:1em;} 
 
     label{text-align: right; width:28%; clear: left; margin-top:.8em; } 
 
     label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset; margin-left: } 
 
     #sub{ margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%} 
 
</style> 
 
</head> 
 
<body> 
 

 
    <form > 
 
     <fieldset><legend>My Login</legend> 
 
      <label for="username">UserName: </label><input type="text" name="username" id="username" value=""> 
 
      <label for="password">Password: </label><input type="password" name="password" id="password" > 
 
      <input type="button" name="theButton" value="Submit" class="btn" data-username="username" /> 
 
     </fieldset> 
 
    </form> 
 

 
<script> 
 

 
console.log("Am I present?"); 
 
$(document).ready(function(){ 
 
    $(document).on('click', '.btn', function() { 
 
    var name = $('#username').val(); 
 
    console.log("Am I Inside?"); 
 
    console.log("name: " +name); 
 
    if (name != undefined && name != null) { 
 
     window.location = 'http://localhost/local/RegistryWS/src/main/webapp/home.html?username=' + name; 
 
    } 
 
    }); 
 
}); 
 

 

 

 
</script> 
 

 

 
</body> 
 
</html>

出典

2016-12-01 02:32:45 gavgrif

どうもありがとうございました。それがうまくいって、リダイレクトされています。しかし、リダイレクトURLには 'http：//localhost/local/RegistryWS/src/main/webapp/home.html？username = username'があります。フォームに入力しているユーザー名を取得できない理由を教えてください。 'data-username =" username "に何か問題がありますか？ – John

oh - 名前変数がボタンのクリックからデータ属性を見つけようとしているからです。 jsのそれを変更して、ユーザー名の入力値を取得すればうまくいくはずです。私は秒を得るときに私の答えを更新します。 – gavgrif

は答えを更新しましたので、名前の値をpにして適用する必要があります。また、名前入力のfor = ""に正しい名前を使用していないことにも注意してください。 – gavgrif

Uncaught SyntaxError：構文が正しくなくても、無効または予期しないトークン

答えて

関連する問題