I must take the data-filter attribute for the clicks, because these are the only differences of the <ul> list and I can't change the inner HTML of them.
Now it's working only with "Phone", but I want that "Phone" disappear when I click e.g. "Tablet".
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>Is this what you're after? Each click shows the content of the item clicked.
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;
});
});
I would define a function that takes in an event, and updates the inner text of the output element to the inner text of the target of the event:
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));
You could try something like this:
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>