Inhalt eines Spans an Eingabefeld anhängen

  • Noch einmal muss ich die Community nerven. :D


    Ich habe eine Reihe von Spans:

    Code
    <span class="pnumb">01</span><span class="pnumb">02</span><span class="pnumb">03</span><span class="pnumb">04</span><span class="pnumb">05</span>
    <input id="collector" class="ptext" type="text" value="Auswahl: " />

    Wie stelle ich es an, dass bei jedem Klick auf ein Span (01 oder 02 oder..) der jeweilie HTML-Inhalt (also auch 01 oder 02) an das Input-Feld (collector) angehängt wird? Bei jedem weiteren Klick auf ein Span soll die Nummer wieder im Input (mit Komma) angehängt werden.


    Also wenn ich in der Reihenfolge 02, 01, 03, 03, 02, 01 auf die Spans klicke, soll dann Auswahl: 02, 01, 03, 03, 02, 01 im Input stehen. :wacko:


    Ich danke euch herzlichst für die Hilfe!

  • EventListener auf alle <span class="pnumb"> und Inhalte in einem Array halten.

    dann per Komma verbinden und an das value des <input id="collector" hängen.


    Relativ einfach mit etwas Grundlagen.

    Was hast Du bisher versucht?

  • Na dann solltest Du ja jetzt einen Ansatz haben, bitte versuche es zunächst selber.

    Die Ansätze stehen in #2


    Wenn Du nicht weiter kommst, zeigst Du Deinen Versuch und woran es scheitert, dann helfen wir sicher weiter.

  • Also, soweit mein Versuch:

    Gut gedacht, klappt aber leider nicht.

  • Also das wollte ich noch hinzufügen, collector heißt jetzt ras_neue_reihenfolge:

    PHP
    <input id="ras_neue_reihenfolge" placeholder="Beispiel: 7,19,12,8" class="define_order_input" type="text" name="packet_order" value="<?php echo $spezialreihenfolge; ?>" />
  • this ist nur verfügbar, wenn Du einen Eventlistener mit addEventListener registrierst. Wenn Du es inline machst, musst Du this explizit übergeben:

    Code
    <span id="span1" class="pnumb" onclick="add2input(this);">01</span>
    <span id="span2" class="pnumb" onclick="add2input(this);">02</span>
    <span id="span3" class="pnumb" onclick="add2input(this);">03</span>
    <script type="text/javascript">
      function add2input(ele) {
        var spanContent = ele.innerHTML;
        var inputValue = document.getElementById('ras_neue_reihenfolge').value;
        document.getElementById('ras_neue_reihenfolge').value = inputValue + spanContent + ",";
      }
  • Grundsätzlich gut gedacht, ja.


    onclick würde ich da nicht nehmen, sondern auf addEventListener setzen.


    Dann hast Du bei Deiner Lösung immer das Problem, dass Du zum Ende des value immer ein , stehen hast.

    Generell kein technisches Problem, aber nicht sehr schick aus meiner Sicht.


    Daher der Tipp mit dem Array:

    JavaScript
    var _numbers = [];

    Das <input> kannst Du dann schonmal global selektieren:

    JavaScript
    var _collector = document.querySelector( '#ras_neue_reihenfolge' );

    Der Rest ist dann nur noch Iteration mit Binden einer Funktionalität an jedes gefundene <span class="pnumb">:

    JavaScript
    document.querySelectorAll( 'span.pnumb' ).forEach( i => {
    
        i.addEventListener( 'click', e => {
    
            _numbers.push( i.textContent );
            _collector.value = _numbers.join(',');
    
        });
    
    });

    Auf diese einfache Weise befinden sich Kommas nur an den Stellen, wo Sie hingehören.

  • Mit addEventListener kann ich nicht viel anfangen, da kenne ich mich zu wenig aus.

    WHAT??? :/


    HTML
    <span class="baz" onclick="foobar()">bla</span>
    Code
    function foobar() {
        // do something
    }

    vs.

    HTML
    <span class="baz">bla</span>
    JavaScript
    document.querySelector('span.baz').addEventListener( 'click', i => {
        // do something
    });

    kann nicht wirklich zum Verständnisproblem abgetan werden, oder?!


    Das Komma am Ende ist nicht wild, da ich es mit PHP per rtrim() entferne.

    Naja, sieht halt während der Klickerei nicht schick aus, mich würde es stören. Aber solange Dich das nicht stört, musst Du das natürlich nicht machen, ist Dein Projekt.

  • reines, ehrliches JavaScript, kein Framework, keine Bibliothek, alles naturbelassen... ;)


    EDIT: Ok, was mir grad einfällt, IE kann die Schreibweise in dem Zusammenhang nicht verarbeiten.

    Das müsste man dann kurz anpassen, ist aber auch halb so wild...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!