サインアップページで.focus（）メソッドが機能しないのはなぜですか？

Question

私は現在、ユーザーが選択した入力に応じて変更されるフィールドの横にテキストを含むサインアップページを設計しています。

$(function() { 
    $('input').on('change', function() { 
    var input = $(this); 
    if (input.val().length) { 
     input.addClass('populated'); 
    } else { 
     input.removeClass('populated'); 
    } 
    }); 
}); 
$(".namewrapper").click(function() { 
    $("#fname").focusin(); 
}); 
$("#fname").focusin(function() { 
    $(".signup").fadeOut(200, function() { 
    $(".signup").text("Phase 1"); 
    $(".introduction").fadeOut(200, function() { 
     $(".introduction").text("To start, go ahead and enter your name."); 
    }); 
    $(".signup").fadeIn(200); 
    $(".introduction").fadeIn(200); 
    }); 
}); 
$(".usernamewrapper").click(function() { 
    $("#username").focus(); 
}); 
$("#username").focus(function() { 
    $(".signup").fadeOut(200, function() { 
    $(".signup").text("Phase 2"); 
    $(".introduction").fadeOut(200, function() { 
     $(".introduction").text("Now, what would you like your username to be?"); 
     $(".introduction").fadeIn(200); 
    }); 
    $(".signup").fadeIn(200); 
    }); 
}); 
$(".emailwrapper").click(function() { 
    $("#emailfield").focus(); 
}); 
$("#emailfield").focus(function() { 
    $(".signup").fadeOut(200, function() { 
    $(".signup").text("Phase 3"); 
    $(".introduction").fadeOut(200, function() { 
     $(".introduction").text("What email shall we use?"); 
     $(".introduction").fadeIn(200); 
    }); 
    $(".signup").fadeIn(200); 
    }); 
}); 
$(".password1wrapper").click(function() { 
    $("#password1").focus(); 
}); 
$("#password1").focus(function() { 
    $(".signup").fadeOut(200, function() { 
    $(".signup").text("Phase 4"); 
    $(".introduction").fadeOut(200, function() { 
     $(".introduction").text("Make sure your password is rememberable and isn't short!"); 
     $(“.introduction”).append(“ < i class = “em em - key” > < /i>”); 
      $(".introduction").fadeIn(200); 
      }); 
     $(".signup").fadeIn(200); 
     }); 
    }); 
    $(".password2wrapper").click(function() { 
     $("#password2").focus(); 
    }); 
    $("#password2").focus(function() { 
     $(".signup").fadeOut(200, function() { 
     $(".signup").text("Phase 5"); 
      $(".introduction").fadeOut(200, function() { 
      $(".introduction").text("Retype your password."); 
      $(“.introduction”).append(“<i class=“em em-key”></i > ”); 
     $(".introduction").fadeIn(200); 
    }); 
    $(".signup").fadeIn(200); 
    }); 
}); 

ご覧のとおり、フィールド（またはdivを含む）に応じて、指示が変更されます。私は1つのフィールドのための関数を持っているとき、これは正常に動作しますが、それらの残りの関数を追加するとすぐに、命令は変更されません。どんな助けにも感謝！

Answer 1

コンソールから考えてみると、.append（）関数が正しく処理されていないことが分かります。それらを削除した後、ファイルの最後に余分な終了文があることがわかりました。