OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to display those buttons which are display conditionally?

  • Thread starter Thread starter Ahmed
  • Start date Start date
A

Ahmed

Guest
I'm creating a real-time mini-project which I can add a game (terminate it or delete it) I can create the games in real time correctly . But the problem with the delete and terminate buttons. this is the connection with the server

Code:
const ws = new WebSocket('ws://localhost:3000');

ws.onopen = () => {
  console.log('Connected to WebSocket server');
  ws.send(JSON.stringify({ action: 'fetchGames' })); 

};

ws.onerror = (error) => {
  console.error('WebSocket Error:', error);
};

this is the creation of terminate and delete buttons

Code:
document.getElementById('create-game').addEventListener('click', () => {
  const name = document.getElementById('game-name').value;
  if (name) {
    ws.send(JSON.stringify({ action: 'createGame', payload: { name } }));
    ws.send(JSON.stringify({ action: 'fetchGames' })); 

  }
});

this is the function that is causing the problem with terminate and delete

Code:
function updateGameLists(games) {
  const activeGames = document.getElementById('active-games');
  const terminatedGames = document.getElementById('terminated-games');
  activeGames.innerHTML = '';
  terminatedGames.innerHTML = '';

  games.forEach(game => {
    const li = document.createElement('li');
    li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
    li.textContent = game.name;
    li.dataset.id = game.id;

    if (game.status === 'active') {
      const buttonGroup = document.createElement('div');
      
      const terminateButton = document.createElement('button');
      terminateButton.classList.add('btn', 'btn-warning', 'mr-2');
      terminateButton.textContent = 'Terminate';
    
      const deleteButton = document.createElement('button');
      deleteButton.classList.add('btn', 'btn-danger');
      deleteButton.textContent = 'Delete';
    
      buttonGroup.appendChild(terminateButton);
      buttonGroup.appendChild(deleteButton);
      li.appendChild(buttonGroup);
      activeGames.appendChild(li);
    
      // Attach event listeners to the terminate buttons
      terminateButton.addEventListener('click', () => {
        ws.send(JSON.stringify({ action: 'terminateGame', payload: { id: game.id } }));
        ws.send(JSON.stringify({ action: 'fetchGames' }));
      });
    
      deleteButton.addEventListener('click', () => {
        ws.send(JSON.stringify({ action: 'deleteGame', payload: { id: game.id } }));
      });
    } else {
      terminatedGames.appendChild(li);
    }
  });
}

Could you pls help me ?

I tried to change the logic of the manipulation of the dom . the problem is that the buttons are displayed in the browser but they are not present in the dom !

<p>I'm creating a real-time mini-project which I can add a game (terminate it or delete it)
I can create the games in real time correctly .
But the problem with the delete and terminate buttons.
this is the connection with the server</p>
<pre><code>const ws = new WebSocket('ws://localhost:3000');

ws.onopen = () => {
console.log('Connected to WebSocket server');
ws.send(JSON.stringify({ action: 'fetchGames' }));

};

ws.onerror = (error) => {
console.error('WebSocket Error:', error);
};
</code></pre>
<p>this is the creation of terminate and delete buttons</p>
<pre><code>document.getElementById('create-game').addEventListener('click', () => {
const name = document.getElementById('game-name').value;
if (name) {
ws.send(JSON.stringify({ action: 'createGame', payload: { name } }));
ws.send(JSON.stringify({ action: 'fetchGames' }));

}
});
</code></pre>
<p>this is the function that is causing the problem with terminate and delete</p>
<pre><code>function updateGameLists(games) {
const activeGames = document.getElementById('active-games');
const terminatedGames = document.getElementById('terminated-games');
activeGames.innerHTML = '';
terminatedGames.innerHTML = '';

games.forEach(game => {
const li = document.createElement('li');
li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
li.textContent = game.name;
li.dataset.id = game.id;

if (game.status === 'active') {
const buttonGroup = document.createElement('div');

const terminateButton = document.createElement('button');
terminateButton.classList.add('btn', 'btn-warning', 'mr-2');
terminateButton.textContent = 'Terminate';

const deleteButton = document.createElement('button');
deleteButton.classList.add('btn', 'btn-danger');
deleteButton.textContent = 'Delete';

buttonGroup.appendChild(terminateButton);
buttonGroup.appendChild(deleteButton);
li.appendChild(buttonGroup);
activeGames.appendChild(li);

// Attach event listeners to the terminate buttons
terminateButton.addEventListener('click', () => {
ws.send(JSON.stringify({ action: 'terminateGame', payload: { id: game.id } }));
ws.send(JSON.stringify({ action: 'fetchGames' }));
});

deleteButton.addEventListener('click', () => {
ws.send(JSON.stringify({ action: 'deleteGame', payload: { id: game.id } }));
});
} else {
terminatedGames.appendChild(li);
}
});
}
</code></pre>
<p>Could you pls help me ?</p>
<p>I tried to change the logic of the manipulation of the dom .
the problem is that the buttons are displayed in the browser but they are not present in the dom !</p>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top