Programmiererforum

ABC


DEF


GHI

function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');
const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');

searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));
}

function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');

const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');
searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));

searchInput.addEventListener('input', () => {
buttons.forEach(btn => btn.classList.remove('active'));
}, { once: true });
}

Ich versuche auf meiner Website Folgendes zu erreichen: Wenn auf eine Schaltfläche geklickt wird, wird sie aktiv, ihr Wert wird an ein Eingabefeld gesendet, und wenn der Wert im Eingabefeld manuell geändert wird, wird der aktive Status der Schaltfläche angezeigt sollte entfernt werden.
Hier ist ein Beispiel für die Schaltflächen:
[code]



ABC


DEF


GHI




[/code]
Ich habe zwei Funktionsvarianten, aber keine funktioniert vollständig und ich kann sie nicht kombinieren.
Bei der ersten Variante liegt das Problem dass der aktive Zustand der Schaltflächen nicht entfernt wird, wenn das Eingabefeld manuell bearbeitet wird.
[code]
function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');
const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');

searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));
}


[/code]
Bei der zweiten Variante besteht das Problem darin, dass Schaltflächen nicht wiederholt umgeschaltet werden können. Es funktioniert nur einmal. Nach dem zweiten Klick (auf eine andere Schaltfläche) wird diese zweite Schaltfläche nicht aktiv.
[code]
function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');

const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');
searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));

searchInput.addEventListener('input', () => {
buttons.forEach(btn => btn.classList.remove('active'));
}, { once: true });
}


[/code]