Button click not clearing the contents of the div container

Question

Button click not clearing the contents of the div container

I am currently working on a JavaScript, HTML, CSS, and Bootstrap project for a tennis club. The project includes a login page (index.html) and a manage player page. Within the manage player page, there are two buttons - add players and show players. When the show players button is clicked, I want to display the data in a table. However, I'm facing an issue where clicking the button multiple times results in generating new tables below the previous ones without clearing them.

Below you will find the code files and screenshots for reference:

managePlayers.html

<!DOCTYPE html>
<html lang="en">

<!-- Code omitted for brevity -->

</body>

</html>

index.js

Screenshots

https://i.sstatic.net/hmlTP.png

https://i.sstatic.net/hmb9f.png

https://i.sstatic.net/DFATA.png

If anyone has a solution to this issue, please let me know. Thank you!

javascript html css bootstrap-4

Answer 1

Answer №1

I haven't reviewed the code, but one way to prevent that is by following these steps: You can set up a boolean variable and set it to true when the button is clicked. Then, you need to add an if statement to only create the table if that variable is not true. The code will resemble something like this ` var isTableCreated = false; If(isTableCreated == false){

isTableCreated = true; //code to generate the table

}

`

Answer 2

I haven't reviewed the code, but one way to prevent that is by following these steps: You can set up a boolean variable and set it to true when the button is clicked. Then, you need to add an if statement to only create the table if that variable is not true. The code will resemble something like this ` var isTableCreated = false; If(isTableCreated == false){

isTableCreated = true; //code to generate the table

}

`

Button click not clearing the contents of the div container

Answer №1

Similar questions

Modifying the label of the Yes/No button in a jqdialog

When editing a user, do not make any changes to the input checkbox

Why do certain list items on my page have a gap between their border and content?

What is the best way to access the data from a CSV file that has been uploaded using ngFile

Initiate timers simultaneously on various devices

Is there a way to showcase the newly added state object on the page without having to reload the page?

Angular JS does not acknowledge null values

When trying to pass a variable from jQuery ajax to PHP session, the data does not get stored in the

What is the most effective way to eliminate error messages from the email format checker code?

css issue with focus on ie11

Is it possible to incorporate a different website font into an email template?

Making a REST API call with an ID parameter using Angular

Materialize experiencing issues with labels overlapping pre-existing content

Retrieve the reference to the plugin object from the element where the plugin is currently active

Problem encountered in Typescript when using async/await with Promise.all to iterate through multiple results

Is there a distinction between copying an array [...arr] and referencing the original array arr in JavaScript ES6?

Creating a dual-row HTML table heading

Obtain the URL link from Unsplash where the picture is sourced

What strategies can be used to effectively perform a mongo db search that accommodates misspelled terms?

Troubulation with AngularJS: Why aren't my directives loading?