2013-01-19 2 views
0

jquery를 디버깅하는 방법을 배우려고합니다. 필자는 동적으로 입력 필드를 추가 할 페이지를 만들려고했습니다. 데이터는 jquery로 보내집니다. 이제 디버깅을 위해, 나는 전체 배열을 console.log하려고하지만 난 파이어 폭스에서이 오류를 얻고있다 :HTML에서 가져온 JavaScript를 사용하여 데이터 인쇄

[: 40 : 17 27.073] 선언되지 않은 HTML 문서의 문자 인코딩을. 문서에 US-ASCII 범위 밖에있는 문자가 포함되어 있으면 문서가 일부 브라우저 구성에서 깨진 텍스트로 렌더링됩니다. 페이지의 문자 인코딩은 문서 또는 전송 프로토콜에서 으로 선언되어야합니다. @ 파일 : ///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html

이 내 코드에서 몇 가지 실수가있는 경우의 의미를 설명해주십시오. Heres는 내 코드

HTML :

<!doctype html> 
<html> 

<head> 
    <title>TakeMeHome</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
    <script type="text/javascript" src="js/main.js"></script> 
    <script type='text/javascript' src='js/app.js'></script> 

    </head> 

    <body> 
    <center><form id="details"> 
     Your Place:<input id="source" type="text"><br><br> 
     Friend1:<input id="friend1" type="text"><br><br> 
     <div id="friends"></div> 
     <div id="button">Add!</div><br><br> 

     <input type="submit" value="go"> 
    </form> 
    </body> 

</html> 

jQuery를 :

var j=2; 
var friends = []; 


$(document).ready(function(){ 

    $('#button').click(function(){ 
     if(j<11){ 
      $('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>'); 
     j++; 
     } 
    else 
     { 
    alert("Limit reached"); 
    } 
    }); 



}); 


$("form").submit(function(){ 

    friends[0] = ('#source').val(); 
    for(var i=1;i<j;i++) 
    { 
     friends[i] = ('#friends'+i+'').val(); 
    } 

    console.log(friends); 
}); 

답변

1

볼 수 있습니다 : 귀하의 문서 타입은 HTML5 때문에

<head> 
    ... 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    ... 
</head> 

, 당신은 또한 charset 속성을 사용할 수 있습니다 그것은 this console.log에서 디버깅에 좋지만 디버깅을 위해 방화 광구를 선호합니다. 방화 광을 사용하여 각각의 모든 행을 디버그 할 수 있으며 각 변수의 값을 볼 수도 있습니다. firefox와 함께 firebug를 사용하고 있습니다. 파이어 폭스 용 firebug는 link에서 다운로드 할 수 있습니다. 도움이 되었기를 바랍니다.

+0

안녕하세요, 저는 jsfiddle을보고 있습니다. 내가 알았던 경고는 매번 "해고된다"라고 말한다. 하지만 내가 입력 한 친구 목록을 보여 주어야합니다. 왜 그렇게 오지 않는거야? – user1263375

+0

나는 바이올린을 업데이트하여 이제 친구에게 var f를 제공 할 것입니다. 나는 또한 에서 약간의 변경을했다.이제는 모든 텍스트 상자를 제공하고 값 상자에 각 텍스트 상자를 가져올 수 있습니다 .. [jsfile] (http://www.jsfiddle.net/fqQLC/1/) –

+0

여전히 목록을 가져 오지 못했습니다! – user1263375

1

오류가 자바 스크립트와는 아무 상관이있다.

<meta charset="UTF-8" />과 같은 메타 태그를 추가하는 경우 수정해야합니다.

doctype 선언에 유형이 있습니다.

+0

하지만 브라우저에서이 기능을 시도 할 때마다 입력 한 모든 친구 이름에 대한 알림이 표시되지 않습니다. ? – user1263375

+0

당신은 당신의 js에 오류가 있기 때문에, 하나의 오류는 당신이 여러 개의 jquery 파일이 포함되어 있다는 것을 볼 수 있습니다. 동일한 페이지에 다른 버전의 jquery를 포함 시키면 충돌이 발생할 수 있습니다. – defau1t

+0

어느 것을 제거해야합니까? 어느 하나라도 – user1263375

1

이것은 자바 스크립트 코드에서 오류가 아니지만 실제 HTML 마크 업의 유효성과 관련하여 Firefox에서 발행 한 일반적인 경고입니다.

header 태그 안에 meta 태그로 문서의 인코딩을 선언해야합니다. 인코딩이 UTF-8 인 경우 예를 들어, 다음과 같습니다 코드가 완벽하게 작동하고

<head> 
    ... 
    <meta charset="UTF-8"> 
    ... 
</head> 
관련 문제