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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

https://jsfiddle.net/8debzkh3/

CodePudding user response：

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;
    });
}); 

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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));