Eingabe feld auslesen

  • 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
    1. <input type="text" name="button1Name" id="button1Name" onclick="this.value=' '" value="Nachname, Vorname">
    2. <a href="javascript:document.getElementById('clone').innerHTML='JA';void(0);">Eintragen</a>
    3. <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

  • habe es hin bekommen :-)


    HTML:

    Code
    1. <input type="text" name="button1Name" id="clone_name" onclick="this.value=' '" value="Nachname, Vorname">
    2. <a href="#" onClick="clone_eintragen()">Eintragen</a>
    3. <div draggable="true" id="clone" class="vorlage">Max und Moritz - Erster Streich</div>


    JS:

    Code
    1. function clone_eintragen(){
    2. InputText = document.getElementById("clone_name").value;
    3. document.getElementById('clone').innerHTML=InputText;
    4. }
  • 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

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


    addEventListener vs onclick

  • 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.

  • 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

  • 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
    1. document.getElementById('name_eintragen').addEventListener('click',function(){
    2. Inva = document.getElementById('clone_name');
    3. if(Inva.value.length>=5){
    4. document.getElementById('clone').innerHTML=Inva.value;
    5. }else{
    6. document.getElementById('clone').innerHTML='Dein Text ist zu kurz';
    7. }
    8. document.getElementById('clone_name').value='';
    9. });



    Danke für eure Hilfe.

    Mein Projekt ist nun endlich fertig.


    Gruß Mücke