Eingabe feld auslesen

Muecke · 8. Juli 2019

Hallo miteinander,

ich möchte mit meinem Link (Javascript) das Textfeld auslesen und an meine ID 'clone' senden, wie mache ich das?

Aktuell sende ich den Text 'JA' an die ID, doch dafür soll der Inhalt des Input Feldes genommen werden mit der ID 'button1Name'

Code

<input type="text" name="button1Name" id="button1Name" onclick="this.value=' '" value="Nachname, Vorname">
<a href="javascript:document.getElementById('clone').innerHTML='JA';void(0);">Eintragen</a>
<div draggable="true" id="clone" ondragstart="dragStart(event);" class="vorlage">Max und Moritz - Erster Streich</div>

Code ist auch hier hinterlegt: https://codepen.io/Muecke/pen/KjrxRq

Gruß Mücke

Muecke · 10. Juli 2019

habe es hin bekommen

HTML:

Code

<input type="text" name="button1Name" id="clone_name" onclick="this.value=' '" value="Nachname, Vorname">
<a href="#" onClick="clone_eintragen()">Eintragen</a>

<div draggable="true" id="clone" class="vorlage">Max und Moritz - Erster Streich</div>

JS:

Code

function clone_eintragen(){
        InputText = document.getElementById("clone_name").value;
    document.getElementById('clone').innerHTML=InputText;
    }

basti1012 · 10. Juli 2019

Schön das du es hinbekommen hast.

Vieleicht noch ein Tipp

Da du ja gerade am lernen bist versuche dir gleich EventListener anzugewöhnen

https://developer.mozilla.org/…ntTarget/addEventListener

Dein Code würde ich da so machen

Code

<input type="text" name="button1Name" id="clone_name" placeholder="Nachname, Vorname">
<a href="#" id="eintragen">Eintragen</a>
<div draggable="true" id="clone" class="vorlage">Max und Moritz - Erster Streich</div>


<script>
document.getElementById('eintragen').addEventListener('click',function(){
  Inva = document.getElementById("clone_name");
  if(Inva.value.length>=3){
      document.getElementById('clone').innerHTML=Inva.value;
  }else{
      document.getElementById('clone').innerHTML='Dein Text ist zu kurz';
  }  
});
</script>

Alles anzeigen

Und da die Frage bestimmt auch noch kommt, hier noch ein Link

addEventListener vs onclick

Arne Drews · 10. Juli 2019

Der aus meiner Sicht entscheidende Unterschied zwischen onclick und addventListener ist, dass onclick das Standarverhaten bei Auftreten des Event überschreibt, addEventListener fügt - wie der Name schon sagt - aber Funktionalität hinzu.

Das ist für mich eigentlich immer der ausschlaggebendste Punkt, addEventListener zu verwenden.

Wenn ich die Standard-Funktionalität explizit nicht ausführen lassen möchte, habe ich da immer noch preventDefault() und stopPropagation() als Mittel zur Verfügung.

Muecke · 10. Juli 2019

Hey,

Oh ja ich bin noch am lernen, und ich bin echt glücklich das ich das so hin bekommen habe wie es gerade läuft.

habe mir den Link zu 'EventTarget.addEventListener()' angeschaut.

Wenn ich das richtig verstanden habe muss ich im HTML Code dann nicht mehr angeben das was gemacht werden soll, sondern habe in der JS Datei stehen welche ID`s etc. überwacht werden sollen und was dann gemacht werden muss soll.

Das klingt sehr spannend und aufgeräumter für mich da HTML in der HTML Datei ist und JS in der JS Datei so wie CSS in der CSS Datei und es wird nichts vermischt.

Mal schauen ob ich das Beispiel von oben umgebaut bekomme.

Jedoch ist JS wie Chinesisch für mich, und ich kann noch nicht mal Englisch.

Gruß Mücke

Arne Drews · 10. Juli 2019

Zitat von Muecke

Das klingt sehr spannend und aufgeräumter für mich da HTML in der HTML Datei ist und JS in der JS Datei so wie CSS in der CSS Datei und es wird nichts vermischt.

Muecke · 12. Juli 2019

Puu hat schon mal jemand gewagt zu erwähnen das JS echt schwer ist, ... so kommt es mir zumindest vor.

so richtig bin ich da noch nicht drin, habe es jedoch geschafft den Code etwas zu verstehen, und zu erweitern

mein eingabe Feld wird jetzt nach dem eintragen immer wider gelehrt. So das nichts altes mehr drin steht.

sieht da so aus:

Code

document.getElementById('name_eintragen').addEventListener('click',function(){
  Inva = document.getElementById('clone_name');
  if(Inva.value.length>=5){
      document.getElementById('clone').innerHTML=Inva.value;  
  }else{
      document.getElementById('clone').innerHTML='Dein Text ist zu kurz';
  }
  document.getElementById('clone_name').value=''; 
});

Danke für eure Hilfe.

Mein Projekt ist nun endlich fertig.

Gruß Mücke

Eingabe feld auslesen

Jetzt mitmachen!

Teilen