JavaScript button event listener failing to display information

I have been developing a Tennis Club Management sample application using javascript, html, css, and bootstrap. The application consists of a login page and a profile page. In the profile page, I have implemented a sidebar with anchor tag links that navigate to different HTML pages when clicked.

The issue arises on the managePlayers.html page, where I have added two buttons with event listeners. I am trying to log in the browser console that a button has been clicked, but the event listener is not working as expected.

Below are the code files and screenshots for reference:

index.html (Login Page)

[index.html code here]

index.js

// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------
[index.js code here]

The Problem (the eventListener for the buttons below are not firing up)

[Problematic eventListener code]

Screenshots

Login Page

[Login Page screenshot link]

Manage Players Page

[Manage Players Page screenshot link]

Looking for solutions, any help please?

javascripthtmlcssbootstrap-4

Answer №1

Upon loading the login page, the JavaScript code finds that 

document.querySelector(".logout")
is null.

This issue arises because the code is run before the init() function is invoked.

To resolve this, ensure init is called first:

init();

document.querySelector(".logout").addEventListener("click", (e) => {
    window.open("index.html");
    e.preventDefault();
});

Similarly, when the manage players page loads, 

document.querySelector(".loginbtn")
is also found to be null.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating an external JavaScript file into an AngularJS project

index.html: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <script src="./assets/namesController.js"></script> <body ng-app="myApp"> < ...

javascripthtmlangularjs

Even though the browser is displaying the CSS file in the sources panel of the development tools, Python Flask is not properly applying the CSS styles

I am facing an issue with my flask application where it is not applying CSS styling to my website. Despite trying various solutions found on Stack Overflow and the internet, none of them seem to work. Even after organizing my directories into separate tem ...

pythonhtmlcssflask

The icon in Material UI button is missing from the display

The button is functional, but the icon inside it isn't displaying correctly:https://i.sstatic.net/MXhIH.jpg Here is the code for the button: <Button color="secondary" aria-label="add an alarm"> <AlarmIcon></AlarmI ...

javascriptreactjsmaterial-ui

Error encountered during post-installation process for package `[email protected]`. The script `node scripts/build.js` failed to execute, resulting in an exit status of 1

https://i.sstatic.net/LC5wq.pngWhenever I run the gulp serve command for my AngularJS Fuse project, I encounter this error. C:\wamp\www\bank_admin_post_login\Fuse-1.4.1-demo>gulp serve C:\wamp\www\bank_admin_post_log ...

htmlangularjsnode.js

Running Javascript code after rendering a HandleBars template in Node/Express

I have a Node.js application where I am trying to load data into a jQuery datatable after the data has been fetched. Currently, I am able to populate the table with the data, but I am facing issues initializing the datatable. Here is how I render the temp ...

javascriptnode.jsexpressmean-stackexpress-handlebars

After installing grunt, the Gruntfile cannot be located. How can this issue be resolved?

After installing grunt, I encountered a problem. Despite trying some commands suggested on stackoverflow in this How to install grunt and how to build script with it, running the grunt command still shows the same result. What steps should I take next?ht ...

javascriptnpmgruntjsnpm-install

How can Selenium in Python retrieve information from the <script> tag?

I am attempting to extract the content inside the script tag. <script type="text/javascript"> INFO </script> More specifically: <!DOCTYPE html> <html lang="en" class="js logged-in client-root"> <head>...</head> & ...

javascriptpythonseleniumselenium-webdriverselenium-chromedriver

Refactor Print Preview Graph Display Issue within Nested Vue Component

I seem to be having trouble accessing this function properly due to an error. I am unsure of how to troubleshoot this issue and determine the correct solution. Any guidance would be greatly appreciated. The component PerformanceDonut.vue is located within ...

javascriptvue.jsvuejs2vue-component

Retrieve data from JSON using AJAX

I am working with an API that provides JSON data in the following format: [{ "Code": "001", "Name": "xyz", "Members": [{ "FullName": "User1" }] }, { "Code": "002", "Name": "asd", "Members": [{ "FullName": "User2 ...

javascriptjqueryjsonajax

The React syntax is malfunctioning

componentDidMount() { const restaurants = Restaurant.all() restaurants.then( rests => { this.setState({ restaurants: rests }) }) } render() { const { restauran ...

javascriptnode.jsreactjssyntax

Tips for positioning an element so that it remains anchored to the content it is placed within

Hey Everyone! I'm struggling a bit with how to position the h2 headings in my code so that they stay fixed in the top right corner of the box while moving along with the rest of the contenthttps://i.stack.imgur.com/OOVaA.png%60 What I'm attempt ...

htmlcss

JQuery's Add/Remove Class Functionality Fails to Execute

After mastering the use of JQuery to manipulate CSS properties with buttons, I am now attempting to create buttons that can add or remove CSS classes. I found a helpful tutorial on this topic at http://www.w3schools.com/jquery/jquery_css_classes.asp Unfor ...

jquerycss

What exactly happened to my buttons when I transition to the mobile display?

Due to time constraints, I decided to save some time by utilizing a CSS template called Horizons created by Templated. This particular CSS template uses Javascript to adjust the layout for mobile devices, causing buttons to switch from inline to block for ...

javascriptphphtmlcss

Customizing Background Color of Bottom Tab Content Container in React Native

Hey there, I need some help with changing the color of the bottom tabs screens. They are currently gray by default (as shown in the image) and I want them to be white. I've tried using tabBarStyle but it doesn't seem to work. If anyone has any i ...

cssreact-native

What is the best way to display an image and text side by side within a single row in react-table?

I am trying to display an image and text side by side within a single column in a React table. I have successfully added two texts together in a single column using the code below: Header: "Name", id: "User", accessor: (d) => ...

javascripthtmlreactjsnext.jsreact-table

Is it possible to utilize the srcset attribute in CSS to adjust image resolution?

Is it possible to utilize the srcset attribute in CSS to upscale all images to 2x their original size? The usual usage of this attribute is as follows: <img src="image.jpg" srcset="image.jpg 1x, higher-resolution-image.jpg 2x" > I'm curious if ...

htmlcsssrcset

Div container placed outside of its parent div

I am struggling to understand why my project-img-text-container is protruding outside its parent div project-image-container and project-img-main. I tried adding project-image-container as a solution, but it didn't work. Both containers are set to rel ...

htmlcss

Efficiently Managing Errors on REST Server

My application has the ability to generate a PDF on demand through service/generatePdf. The response includes content-type="application/pdf" with binary contents in the outputStream. According to business requirements, clicking a button should open a new ...

javascriptjqueryrestpdf

"Enhancing User Experience by Enabling Full Clickability on List Items

I am working on a hamburger menu with a dropdown feature, and I want the entire dropdown menu to be clickable instead of just the text. Below is my current code which only allows clicking on the text. cshtml <nav class="navbar fixed-top navbar-dark bg ...

htmlasp.net-mvcrazorbootstrap-4

Getting numerous MongoDB records with identical attributes by means of Express

I am attempting to retrieve all MongoDB entries associated with a specific username using Express. Here is the code I have written: transcriptRepository.getTranscriptByUsername = (username) => { return Transcript.find({ username }) .then( tran ...

javascriptnode.jsmongodbexpressmongoose