Debo tomar el atributo de filtro de datos para los clics, porque estas son las únicas diferencias de la lista <ul> y no puedo cambiar el HTML interno de ellos.
Ahora solo funciona con "Teléfono", pero quiero que ese "Teléfono" desaparezca cuando haga clic, por ejemplo, en "Tableta".
var outputText = ""; const conbtn = document.querySelectorAll('li[data-filter=".eael-cf-phone"]', 'li[data-filter=".eael-cf-tablet"]', 'li[data-filter=".eael-cf-Laptop"]', 'li[data-filter=".eael-cf-PC"]'); var output = document.getElementById('output'); for (var i = 0; i < conbtn.length; i++) { outputText += conbtn[i].innerText; }; conbtn.forEach(function(elem) { elem.addEventListener("click", function() { document.getElementById('output').innerText = outputText; }); }); <div class="container"> <div class="row"> <div class="col-6"> <ul> <li data-load-more-status="0" data-first-init="1" class="control all-control" data-filter="*">All</li> <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-phone">Phone</li> <li data-load-more-status="0" data-first-init="0" class="control active" data-filter=".eael-cf-tablet">Tablet</li> <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-laptop">Laptop</li> <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-pc">PC</li> </ul> </div> <div class="col-6"> <p id="output" style="text-align:center;font-size: 20px;">Output: </p> </div> </div> </div>¿Es esto lo que buscas? Cada clic muestra el contenido del elemento en el que se hizo clic.
const conbtn = document.querySelectorAll('li[data-filter]'); const output = document.getElementById('output'); conbtn.forEach(function(elem) { elem.addEventListener("click", function(e) { output.innerText = e.target.innerText; }); });Definiría una función que toma un evento y actualiza el texto interno del elemento de salida al texto interno del objetivo del evento:
const conbtn = document.querySelectorAll('li[data-filter]'); const output = document.getElementById('output'); function updateOutput(e) { output.innerText = e.target.innerText; } conbtn.forEach(elem => elem.addEventListener("click", updateOutput));Podrías intentar algo como esto:
var outputText = ""; // XYZ would be replaced with a better class name const conbtn = document.querySelectorAll('.xyz .control'); var output = document.getElementById('output'); conbtn.forEach(function(elem) { elem.addEventListener("click", function() { output.innerText = elem.innerText; }); }); <div class="container"> <div class="row"> <div class="col-6"> <ul class="xyz"> <li data-load-more-status="0" data-first-init="1" class="control all-control" data-filter="*">All</li> <li data-load-more-status="0" data-first-init="0" class="control">Phone</li> <li data-load-more-status="0" data-first-init="0" class="control active">Tablet</li> <li data-load-more-status="0" data-first-init="0" class="control">Laptop</li> <li data-load-more-status="0" data-first-init="0" class="control">PC</li> </ul> </div> <div class="col-6"> <p id="output" style="text-align:center;font-size: 20px;">Output: </p> </div> </div> </div>