Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I simplify this piece of jaascript code

I’m sure this JS piece of JavaScript code can be simplified… I’m trying to reduce the amount of code lines and believe this can be condensed and merged into a shorter version? It’s basically a decision tree with yes | no choices and results appear according to user yes | no selection.

Much appreciated, many thanks in advance.

<script>
    document.getElementById('yesButton').addEventListener('click', function() {
        document.getElementById('noPanel').classList.add('hidden');
        document.getElementById('yesPanel').classList.remove('hidden');
        document.getElementById('keepPanel').classList.add('hidden');
        document.getElementById('sellPanel').classList.add('hidden');
        document.getElementById('gainNoPanel').classList.add('hidden');
        document.getElementById('gainYesPanel').classList.add('hidden');
        document.getElementById('cgtNoPanel').classList.add('hidden');
        document.getElementById('cgtYesPanel').classList.add('hidden');
    });

    document.getElementById('noButton').addEventListener('click', function() {
        document.getElementById('yesPanel').classList.add('hidden');
        document.getElementById('noPanel').classList.remove('hidden');
        document.getElementById('keepPanel').classList.add('hidden');
        document.getElementById('sellPanel').classList.add('hidden');
        document.getElementById('gainNoPanel').classList.add('hidden');
        document.getElementById('gainYesPanel').classList.add('hidden');
        document.getElementById('cgtNoPanel').classList.add('hidden');
        document.getElementById('cgtYesPanel').classList.add('hidden');
     });

     document.getElementById('keepButton').addEventListener('click', function() {
         document.getElementById('keepPanel').classList.remove('hidden');
         document.getElementById('sellPanel').classList.add('hidden');
         document.getElementById('gainNoPanel').classList.add('hidden');
         document.getElementById('gainYesPanel').classList.add('hidden');
         document.getElementById('cgtNoPanel').classList.add('hidden');
         document.getElementById('cgtYesPanel').classList.add('hidden');
        });

    document.getElementById('sellButton').addEventListener('click', function() {
        document.getElementById('sellPanel').classList.remove('hidden');
        document.getElementById('keepPanel').classList.add('hidden');
        document.getElementById('gainNoPanel').classList.add('hidden');
        document.getElementById('gainYesPanel').classList.add('hidden');
        document.getElementById('cgtNoPanel').classList.add('hidden');
        document.getElementById('cgtYesPanel').classList.add('hidden');
    });

    document.getElementById('gainNoButton').addEventListener('click', function() {
        document.getElementById('gainNoPanel').classList.remove('hidden');
        document.getElementById('gainYesPanel').classList.add('hidden');
        document.getElementById('cgtNoPanel').classList.add('hidden');
        document.getElementById('cgtYesPanel').classList.add('hidden');
    });

    document.getElementById('gainYesButton').addEventListener('click', function() {
        document.getElementById('gainYesPanel').classList.remove('hidden');
        document.getElementById('gainNoPanel').classList.add('hidden');
        document.getElementById('cgtNoPanel').classList.add('hidden');
        document.getElementById('cgtYesPanel').classList.add('hidden');
    });

    document.getElementById('cgtNoButton').addEventListener('click', function() {
        document.getElementById('cgtNoPanel').classList.remove('hidden');
        document.getElementById('cgtYesPanel').classList.add('hidden');
    });

    document.getElementById('cgtYesButton').addEventListener('click', function() {
        document.getElementById('cgtYesPanel').classList.remove('hidden');
        document.getElementById('cgtNoPanel').classList.add('hidden');
    });
</script>
Tags:

2

Answers


  1. 0

    As per existing code i created this simplified code :

    function showPanel(panelToShow) {
    // List all panel IDs in array formate
    const panels = ['noPanel', 'yesPanel', 'keepPanel', 'sellPanel', 'gainNoPanel', 'gainYesPanel', 'cgtNoPanel', 'cgtYesPanel'];
    
    // Hide all panels
    panels.forEach(panel => {
        document.getElementById(panel).classList.add('hidden');
    });

    // Show the specific panel
    document.getElementById(panelToShow).classList.remove('hidden');
}

    // Event listeners for each button

    document.getElementById('yesButton').addEventListener('click', () => showPanel('yesPanel'));
document.getElementById('noButton').addEventListener('click', () => showPanel('noPanel'));
document.getElementById('keepButton').addEventListener('click', () => showPanel('keepPanel'));
document.getElementById('sellButton').addEventListener('click', () => showPanel('sellPanel'));
document.getElementById('gainNoButton').addEventListener('click', () => showPanel('gainNoPanel'));
document.getElementById('gainYesButton').addEventListener('click', () => showPanel('gainYesPanel'));
document.getElementById('cgtNoButton').addEventListener('click', () => showPanel('cgtNoPanel'));
document.getElementById('cgtYesButton').addEventListener('click', () => showPanel('cgtYesPanel'));
    Login or Signup to reply.
  2. 0

    Please delegate from the nearest static container. You can replace Button by Panel

    const container = document.getElementById('container');

const panels = Array.from(document.querySelectorAll('.panel'));

container.addEventListener('click', (e) => {
  const panelId = e.target.id.replace('Button', 'Panel');
  if (!document.getElementById(panelId)) return;

  panels.forEach(panel => {
    panel.classList.toggle('hidden', panel.id !== panelId);
  });
});

    or use a lookup table

    const container = document.getElementById('container');

const panelMap = { // can be created from the IDs of the buttons too
  yesButton: 'yesPanel',
  noButton: 'noPanel',
  keepButton: 'keepPanel',
  sellButton: 'sellPanel',
  gainNoButton: 'gainNoPanel',
  gainYesButton: 'gainYesPanel',
  cgtNoButton: 'cgtNoPanel',
  cgtYesButton: 'cgtYesPanel',
};

const panels = Object.values(panelMap);

container.addEventListener('click', (e) => {
  const panelId = panelMap[e.target.id];
  if (!panelId) return;

  panels.forEach(panel => {
    document.getElementById(panel).classList.toggle('hidden', panel !== panelId);
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search