<input type="text">

​자바스크립트 <input type="text">에서 alert띄우기​

<tr>

<td class="form_x_reg_title_t" valign="top">추가배송비</td>

<td><input class="input_reg_s_8" type="text" name="areaaddr " id="areaaddr " OnClick ="alert('난니니뇨')" readonly >
<img src ="images/Question2.png" width=30 height=30 id ="question" OnClick ="alert('닐리리야')" ></td>

</tr>​

​

이렇게 하면 alert띄울 수 있다

​

​

​자바스크립트 <input type="text">에서 데이터받아서 function call

function  zone (){
 if(f.addr1.value != ""){
  alert(f.addr1.value

  var areaaddr = f.addr1.value.substr(0,2);
  alert(areaaddr);
 }
}

​

​

​<input class="input_reg_s_8" type="text" name="areaaddr" id="areaaddr" OnClick ="zone(${f.addr1.value})" readonly >
​

======> 근데 문제는 function은 실행되는데 가장 최근 값을 가져와야 하는데  가져오질 못한다.

function zone 에 변수 areaaddr이 갱신이 안됨.

​

=======> [object HTMLInputElement]이런 에러도 남

 [object HTMLInputElement] 

http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=183135380&qb=W29iamVjdCBIVE1MSW5wdXRFbGVtZW50XQ==&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=RJhJB35Y7vwssc8ZMuGsssssstV-116509&sid=U7Y7j3JvLDwAAH8EInw

 

1. 먼저 이해를 하기 쉽게 onClick='fncfocus(this);' 에 대한 설명부터 해드리겠습니다.

onClick='fncfocus(this);' 에서 this 는 이 HTML 요소의 onClick 이라는 속성이 들어 있던 곳의

HTML 요소 스스로를 의미합니다.

 

만약

<div ... onClick='fncfocus(this);'> 라고 한다면 바로 그 <div> 를 이야기 하고

<form ...  onClick='fncfocus(this);'> 이라면 바로 그 <form> 을 이야기 합니다.

 

마찬가지로 질문의 내용으로 유추해본다면

<input ... onClick='fncfocus(this);'> 와 같은 폼요소 부분이 HTML 안에 있었을 것입니다.

 

결국 

 

1. onClick='fncfocus(this);' 에 의해 어떤 HTML 요소에서 마우스클릭 이벤트가 발생하면

그 이벤트가 발생한 HTML 요소를 fncfocus() 라는 자바스크립트 함수에 전달해주게 됩니다.

 

2 .그럼 자바스크립트의 function fncfocus(obj) {...} 에서는

매개변수인 지역변수 obj 에 이 HTML 요소를 전달 받게 됩니다.

 

쉽게 말해

 

obj = <input ... onClick='fncfocus(this);'>

 

와 같은 일이 생기게 되는 것입니다.

 

물론 자바스크립트에서 위처럼 적어 사용할 수는 없습니다. 위는 그냥 직설적으로 적어본 것입니다.

보통은 id 를 체크하는 getElementById() 나 name 값들을 체크하는 getElementsByName() 가지고

아래처럼 사용할 수도 있습니다. 

 

obj = <input id="aaa" name="bbb" ... onClick='fncfocus(this);'>

 

와 같은 사용이라면

 

obj = document.getElementById('aaa');//id로 HTML 객체를 찾아 obj 에 대입 

obj = document.forms['폼이름'].bbb;//name으로 HTML 객체를 찾아 obj 에 대입

 

처럼 사용하여 HTML 객체를 변수에 담을 수 있습니다.

 

따라서 이 함수 내에서 alert(obj)를 하면

obj에 받은 객체는 그냥 alert라는 명령으로 한 번에 그 내용을 보여줄 수 없는 객체임으로

그 종류(typeof)인 [object HTMLInputElement]라는 글자만 경고창에 보여주게 된 것입니다.

 

[object HTMLInputElement]] 라는 말이 바로 

"이것은 오브젝트(=연관배열) 객체인데 HTML의 input 요소다." 라는 의미입니다.