자바 스크립트에서 이미지 이름 가져 오기

Question

클릭 할 수있는 이미지가 두 개 있습니다.
이미지를 클릭하면 텍스트 필드에 이름을 추가해야합니다.
이 예에서 미키 마우스의 이미지, 이미지의 이름은 "미키 마우스"입니다.이 이름은 텍스트 필드에 있어야합니다.
내 코드는 전체 이미지 문자열이 텍스트 상자에 있습니다.

이

이미지

<a onClick="insertText(this)" 
    href="#pagetwo" 
    data-transition="slide"> 
     <img src="images/mickey.png" 
      name="Mickey Mouse" 
      width="114" 
      height="114"> 
</a> 

에게 텍스트 필드에 쓸 수있는 기능입니다 :

function insertText(txt) { 
    document.getElementById('disney').value = txt.innerHTML; 
} 

양식 필드 :

<label for="name">Melding:</label> 
<input type="text" name="disneyfigure" 
     id="disney" readonly 
     value="<hier komt automatisch disney figuur>"> 

Answer 1

insertText(this)의 this는 앵커 태그를 말합니다. 따라서 요청할 때 innerHTML은 앵커 태그에 포함 된 HTML을 제공합니다.

또한 name 특성을 추출해야하므로이 특성을 구체적으로 검색해야합니다.

변경

function insertText(a) { 
    document.getElementById('disney').value = a.getElementsByTagName('img')[0].getAttribute('name'); 
} 

Answer 2

당신은 내부의 img을 찾을 필요 div, querySelector 또는 getElementsByTagName을 사용하면 ge 이 getAttribute()를 사용 name 속성의 T :

function insertText(txt) 
 
{ 
 
    var image = txt.getElementsByTagName('img')[0]; // find the image 
 
    var text = image.getAttribute('name'); // get it's name attribute value 
 
    document.getElementById('disney').value = text; 
 
}

<div><a onClick="insertText(this)" href="#pagetwo" data-transition="slide"><img src="images/mickey.png" name="Mickey Mouse" width="114" height="114"></a></div> 
 

 
<label for="name">Melding:</label> 
 
<input type="text" name="disneyfigure" id="disney" readonly value="<hier komt automatisch disney figuur>">

Answer 3

같은 것을 할 수있는 기능 당신은 이미지 이름 alt 속성을 사용합니다.

<img src="images/mickey.png" alt="Mickey Mouse" width="114" height="114"> 

그럼 당신은 쉽게 코드를 입력 텍스트로 채울 수 있습니다 : 샘플에

document.getElementById('disney').value = txt.alt;