Inhalt eines Spans an Eingabefeld anhängen

  • Noch einmal muss ich die Community nerven. :D


    Ich habe eine Reihe von Spans:

    Code
    1. <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>
    2. <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!

  • 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
    1. <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
    1. <span id="span1" class="pnumb" onclick="add2input(this);">01</span>
    2. <span id="span2" class="pnumb" onclick="add2input(this);">02</span>
    3. <span id="span3" class="pnumb" onclick="add2input(this);">03</span>
    4. <script type="text/javascript">
    5. function add2input(ele) {
    6. var spanContent = ele.innerHTML;
    7. var inputValue = document.getElementById('ras_neue_reihenfolge').value;
    8. document.getElementById('ras_neue_reihenfolge').value = inputValue + spanContent + ",";
    9. }
  • 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
    1. var _numbers = [];

    Das <input> kannst Du dann schonmal global selektieren:

    JavaScript
    1. 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
    1. document.querySelectorAll( 'span.pnumb' ).forEach( i => {
    2. i.addEventListener( 'click', e => {
    3. _numbers.push( i.textContent );
    4. _collector.value = _numbers.join(',');
    5. });
    6. });

    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
    1. <span class="baz" onclick="foobar()">bla</span>
    Code
    1. function foobar() {
    2.     // do something
    3. }

    vs.

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

    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.