Eingabewert mit Text in Verbindung mit Javascript setzen

Question

Ich habe ein Eingabefeld <input type="text" name="input">.

Ich habe auch ein paar Links

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

ich den Benutzer, klicken Sie auf einen Link lassen wollen und den Wert des Eingangs mit dem Wert in der Verbindung gesetzt.

Ich denke, ich sollte etwas tun, wie

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

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

aber ich weiß, dass document.getElementsByTagName('a') nicht ein Array zurückgibt, so ist es nicht möglich, und ich bin nicht sicher, ob dies der richtige Ansatz ist.

Answer 1

getElementsByTagName() gibt eine HTMLCollection zurück.

Die Verwendung gemäß der Dokumentation:

Die HTMLCollection Schnittstelle stellt eine generische Sammlung (array-ähnlichen Objekt ähnlich wie Argumente) der Elemente (in der Dokumentreihenfolge) und bietet Methoden und Eigenschaften für die aus der Liste auswählen .

// document.forms is an HTMLCollection 

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

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

Dies bedeutet, dass Sie in der Lage sein sollten Ihr Ergebnis wie ein Array (einschließlich der Verwendung von .length) zu behandeln.

Answer 2

Erstens, Dom Listen sind nicht normale Arrays, so forEach wird nicht funktionieren. Zweitens ist innerHTML nicht Funktion, es ist Eigenschaft ..

Die [] .slice.call, kann verwendet werden, um in ein normales Array zu konvertieren.

Versuchen Sie dies unten. ->

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

Versuchen Sie dies unter:

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>