用javascript中的文本设置输入值

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>