Hallo DataPearl und willkommen im Forum!
Ich dachte zunächst, das die Events "change" oder "input" dein Problem lösen aber das war ein Irrtum, wie auch hier angegeben wird:
Die Lösungen mit Custom-Events, die dort angegeben werden sind unnötig kompliziert. Besser eine Funktion definieren, die deine Aktionen ausführt und explizit aufrufen:
<button onclick="test1()">Test 1</button>
<button onclick="test2()">Test 2</button>
<button onclick="leer()">Leeren</button>
<input id="inputeins">
<script>
function test1() {
$('#inputeins').val('Test1');
aenderung();
}
function test2() {
$('#inputeins').val('Test2');
aenderung();
}
function leer() {
$('#inputeins').val('');
aenderung();
}
function aenderung() {
console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
}
</script>
Alles anzeigen
Oder etwas kompakter:
<button onclick="aenderung('test1')">Test 1</button>
<button onclick="aenderung('test2')">Test 2</button>
<button onclick="aenderung('')">Leeren</button>
<input id="inputeins">
<script>
function aenderung(theValue) {
$('#inputeins').val(theValue);
aenderungReaktion();
}
function aenderungReaktion() {
console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
}
</script>
Alles anzeigen
Alternativ könnte man das auch noch etwas moderner aufziehen und das Ganze mit Klassen steuern und das Eventbubbling ausnutzen:
<button class="button-for-test1" data-val="test1">Test 1</button>
<button class="button-for-test1" data-val="test2">Test 2</button>
<button class="button-for-test1" data-val="">Leeren</button>
<input id="inputeins">
<button id="weiter">Weiter</button>
<script>
document.addEventListener('click', event => {
// Wurde ein Button für das Eintragen in #inputeins gedrückt?
if (event.target.classList.contains('button-for-test1')) {
const
// Einzutragenden Wert bereit stellen:
dat = event.target.dataset.val,
input1 = document.getElementById('inputeins'),
weiterBtn = document.getElementById('weiter');
input1.value = dat;
// Ist der einzutragende Wert kein Leerstring?
if (dat != '') {
// Klasse "aktiv" beim weiter-Button eintragen:
weiterBtn.classList.add('aktiv')
} else {
// Klasse "aktiv" beim weiter-Button loeschen:
weiterBtn.classList.remove('aktiv')
}
}
// Wurd der weiter-Button gedrückt?
if (event.target.id == 'weiter') {
// Weitere Verarbeitung abhängig von der Klasse "aktiv":
if (event.target.classList.contains('aktiv')) {
console.log('weiter-Button gedrückt bei Zustand "aktiv"');
} else {
console.log('weiter-Button gedrückt bei Zustand "inaktiv"');
}
}
});
</script>
Alles anzeigen
Dann kannst Du auch die Gestaltung des weiter-Buttons mit CSS steuern:
button#weiter {
background-color: red;
}
button#weiter.aktiv {
background-color: lightgrey;
}
