자바 스크립트와 연결된 텍스트로 입력 값을 설정하십시오.

Question

입력란 <input type="text" name="input">이 있습니다.

는 또한 몇 가지 링크 나 링크에서 사용자가 클릭을하자 링크의 값으로 입력 값을 설정할

<div> 
<a href="#">first link</a> 
<a href="#">second link</a> 
... 
</div> 

있습니다.

은 내가

const input = document.getElementById('input'); 

document.getElementsByTagName('a').forEach(function() { 
    this.onclick = function() { 
    input.value = this.innerHTML(); 
    } 
}); 

같은 것을해야 추측하지만 document.getElementsByTagName('a') 배열을 반환하지 않는 것을 알고, 그래서 그것은 가능하지, 난이 올바른 방법입니다 확실하지 않다.

Answer 1

getElementsByTagName()은 HTMLCollection을 반환합니다.

워드 프로세서 당 사용량 :

HTMLCollection 인터페이스 (문서 순) 요소들의 일반적인 콜렉션 (인수 유사한 어레이 형상 물체)을 나타내고,리스트로부터 선택하기위한 방법 및 특성을 구비 .

// document.forms is an HTMLCollection 

elem1 = document.forms[0]; 
elem2 = document.forms.item(0); 

alert(elem1 === elem2); // shows: "true" 

이것은 당신이 (.length를 사용 포함) 배열처럼 결과를 처리 할 수 ​​있어야합니다 것을 의미한다.

Answer 2

첫째, Dom 목록은 정상적인 배열이 아니므로 forEach는 작동하지 않습니다. 둘째, innerHTML은 함수가 아니며 속성입니다.

[] .slice.call은 일반 배열로 변환하는 데 사용할 수 있습니다.

아래에서보십시오. ->

const input = document.getElementById('input'); 
 

 
[].slice.call(document.getElementsByTagName('a')). 
 
forEach(function (e) { 
 
    e.onclick = function (evt) { 
 
    evt.preventDefault(); 
 
    input.value = this.innerHTML; 
 
    } 
 
});

<div> 
 
<a href="#">first link</a> 
 
<a href="#">second link</a> 
 
</div> 
 

 
<input id="input" type="text">

Answer 3

다음이 시도 :

https://jsfiddle.net/7h1a3p4x/5/

var el = document.getElementsByClassName("link"); 
 
for (var i = 0; i < el.length; i++) { 
 
    el[i].addEventListener('click', sendData, false); 
 
} 
 

 
function sendData() { 
 
    var input = document.getElementById("myinput"); 
 
    input.value = this.innerHTML; 
 
}

<input id="myinput" type="text" name="name" /> 
 
<div> 
 
    <a class="link" href="#">LINK 1</a> 
 
    <a class="link" href="#">LINK 2</a> 
 
</div>