자바 스크립트 양식 입력 검색

Question

왜 그것을하다는 텍스트 상자과 이 버튼 제출이 포함 된 형태로, 나는 사용자가 텍스트 상자에 입력 된 내용을 경고 할 수 있지만, 그것을 인쇄 할 수 없습니다 그 페이지? 내가 도대체 ​​뭘 잘못하고있는 겁니까?

는 몇 가지 이유를 들어 코드

<form name="Serb" action="" method="get"> 
<input name="Name" type="text" size="15" maxlength="20" /> 
<input name="Join" type="submit" value="Join" onClick="serb(this.form)" /> 

<script type="text/javascript"> 
    function serb(form){ 
    var x = document.Serb.Name.value; 
    alert(x); \\this alerts 
    document.write(x); \\this should print on page 
    } 
</script> 

이다, 경고는 잘 작동하고 사용자가 '참여하기'를 누른 후 사용자 이름 상자에 입력 한 내용을 정확하게 표시됩니다. 그러나 페이지의 정보는 인쇄되지 않습니다. 왜 그런가요?

Answer 1

페이지가로드/구문 분석 된 후에 document.write()를 사용하는 것은 좋지 않습니다. 이 시점에서 페이지 HTML을 새 내용으로 덮어 씁니다. document.write()는 일반적으로 페이지가로드 될 때 특정 지점의 내용을 페이지에 삽입하기 위해 페이지가로드되는 동안 사용됩니다.

값을 페이지의 일부 항목에 넣으려면 해당 DOM 방법을 사용하여 입력 필드에 값을 입력하고 div에 innerHTML을 설정해야합니다.

여기에서 document.write에 대한 내용은 https://developer.mozilla.org/en/document.write입니다.

다음은 document.write()를 사용하지 않고 필드의 값을 가져 와서 페이지의 다른 객체에 넣는 예제입니다. http://jsfiddle.net/jfriend00/dU8Sr/.

HTML :

<form name="Serb" action="" method="get"> 
<input name="Name" type="text" size="15" maxlength="20" /> 
<input name="Join" type="button" value="Join" onClick="serb(this.form)" /> 
</form> 
<br> 
<br>Output: <span id="output"></span> 

자바 스크립트 :

function serb(form) { 
    var x = document.Serb.Name.value; 
    document.getElementById("output").innerHTML = x; 
} 

Answer 2

그것은 않습니다 작업. 텍스트 상자의 값이 페이지에 인쇄됩니다.

하지만 :

1. \\ 자바 스크립트에서 아무것도 의미하지 않는다. 설명은 //으로 시작됩니다. 이것은 쓰여지는 값을 보지 못하는 이유 일 가능성이 높습니다.

2. document.write은 HTML 페이지의 모든 내용을 해당 인수로 바꿉니다. (문서가로드 된 후 호출되는 경우). 따라서 Javascript를 배우려고하지 않는 한 아주 좋은 아이디어는 아닙니다.

   document.write의 작동 방법을 배우려는 경우가 아니라면 Javascript를 배우는 경우에도 실제로 사용하는 것은 좋지 않습니다. 페이지의 내용을 조작 할 수있는 유연성 (더 나은) 방법을 사용하면 오류가 콘솔을 확인 않았다 겸손 getElementById