Inhalt eines Spans an Eingabefeld anhängen

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.

this ist nur verfügbar, wenn Du einen Eventlistener mit addEventListener registrierst. Wenn Du es inline machst, musst Du this explizit übergeben:

<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:

var _numbers = [];

Das <input> kannst Du dann schonmal global selektieren:

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">:

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.

Zitat von PaynesGrey

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

WHAT???

<span class="baz" onclick="foobar()">bla</span>

function foobar() {
    // do something
}

vs.

<span class="baz">bla</span>

document.querySelector('span.baz').addEventListener( 'click', i => {
    // do something
});

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

Zitat von PaynesGrey

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

Darauf wurde Dir in #7 geantwortet