Я создаю пример приложения (Tennis Club Management), используя javascript, html, css, bootstrap, в котором я создал страницу входа и страницу профиля. На странице профиля я создал боковую панель со ссылками на тег привязки, которые открывают соответствующую страницу HTML (например: managePlayers. html).
Теперь проблема в managePlayers . html, в этом у меня есть две кнопки и добавлен eventListener на кнопках, в настоящее время я хочу войти в браузер, при нажатии на которую кнопка. Но eventListener не работает.
Ниже приведены файлы кода и снимки экрана
index. html (Страница входа)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tennis Club Project</title>
<!-- ADDING FONT AWESOME CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ADDING BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- ADDING STYLE.CSS -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<img src="./lock.png" alt="lock" class="lock">
<!-- ADDING "DIV" CONTAINER -->
<div class="container">
<div class="row">
<form class="login-form">
<h5>TENNIS CLUB ADMIN LOGIN</h5>
<br>
<div class="form-group">
<label>Email Address :</label>
<input type="email" class="form-control email" id="email" aria-describedby="emailHelp"
placeholder="Enter Email ID">
<label class="labelemailerror"></label>
</div>
<div class="form-group">
<label for="password">Password :</label>
<input type="password" class="form-control password" id="password" placeholder="Enter Password">
<label class="labelpassworderror"></label>
</div>
<br>
<button type="submit" class="btn btn-primary loginbtn">Log In</button>
<div class="row">
<div class="col">
<label class="forgotpassword"><span>Forgot Password ?</span></label>
</div>
<div class="col">
<label class="signup"><span>Sign Up</span></label>
</div>
</div>
</form>
</div>
</div>
<!-- ADDING BOOTSTRAP JS -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<!-- ADDING INDEX.JS -->
<script src="/js/index.js"></script>
</body>
</html>
index. js
// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------
var email, password;
document.querySelector(".loginbtn").addEventListener("click", (e) => {
email = document.querySelector(".email").value;
password = document.querySelector(".password").value;
document.querySelector(".labelemailerror").innerHTML = "";
document.querySelector(".labelpassworderror").innerHTML = "";
// ------------TESTING CODE FOR CHECKING VALIDATION AND PRINTING ERROR ON LABELS IF ANY-------------
if (email === "admin@wimbledon.com" && password === "rogerfederer") {
console.log("Login successfull....");
window.open("profile.html");
}
else if (email === "" && password === "") {
document.querySelector(".labelpassworderror").innerHTML = "Email and Password cannot be blank"
}
else if (email === "") {
document.querySelector(".labelemailerror").innerHTML = "Email cannot be blank";
}
else if (password === "") {
document.querySelector(".labelpassworderror").innerHTML = "Password cannot be blank"
}
else {
document.querySelector(".labelpassworderror").innerHTML = "Invalid Email or Password";
}
console.log(email, password);
e.preventDefault();
});
/*
---------------------TESTING CODE FOR PROFILE HTML PAGE----------------------
*/
function init() {
var myDiv = document.createElement("div");
myDiv.className = "sidebar";
document.body.appendChild(myDiv);
var home = document.createElement("a");
home.className = "active home";
home.href = "profile.html";
home.innerHTML = "Home";
document.body.appendChild(myDiv).appendChild(home);
var managePlayers = document.createElement("a");
managePlayers.className = "active managePlayers";
managePlayers.href = "managePlayers.html";
managePlayers.innerHTML = "Manage Players";
document.body.appendChild(myDiv).appendChild(managePlayers);
var manageTournaments = document.createElement("a");
manageTournaments.className = "active manageTournaments";
manageTournaments.href = "manageTournaments.html";
manageTournaments.innerHTML = "Manage Tournaments";
document.body.appendChild(myDiv).appendChild(manageTournaments);
var manageMatches = document.createElement("a");
manageMatches.className = "active manageMatches";
manageMatches.href = "manageMatches.html";
manageMatches.innerHTML = "Manage Matches";
document.body.appendChild(myDiv).appendChild(manageMatches);
var manageTrainers = document.createElement("a");
manageTrainers.className = "active manageTrainers";
manageTrainers.href = "manageTrainers.html";
manageTrainers.innerHTML = "Manage Trainers";
document.body.appendChild(myDiv).appendChild(manageTrainers);
var manageFees = document.createElement("a");
manageFees.className = "active manageFees";
manageFees.href = "manageFees.html";
manageFees.innerHTML = "Manage Fees";
document.body.appendChild(myDiv).appendChild(manageFees);
var logout = document.createElement("a");
logout.className = "active logout";
logout.href = "index.html";
logout.innerHTML = "Logout";
document.body.appendChild(myDiv).appendChild(logout);
}
//----------------------TESTING CODE FOR LOGOUT-----------------------
document.querySelector(".logout").addEventListener("click", (e) => {
window.open("index.html");
e.preventDefault();
});
//-------------------TESTING CODE FOR DISPLAYING "SHOW PLAYERS TABLE" OF MANAGE PLAYERS HTML PAGE----------------
document.querySelector(".showplayers").addEventListener("click", (e) => {
console.log("show players button clicked.......");
e.preventDefault();
});
//--------------------TESTING CODE FOR "ADDING PLAYERS" OF MANAGE PLAYERS HTML PAGE-------------------------------
document.querySelector(".addplayers").addEventListener("click",(e)=>{
console.log("add players button clicked......");
});
Проблема (eventListener для кнопок ниже не запускается)
//-------------------TESTING CODE FOR DISPLAYING "SHOW PLAYERS TABLE" OF MANAGE PLAYERS HTML PAGE----------------
document.querySelector(".showplayers").addEventListener("click", (e) => {
console.log("show players button clicked.......");
e.preventDefault();
});
//--------------------TESTING CODE FOR "ADDING PLAYERS" OF MANAGE PLAYERS HTML PAGE-------------------------------
document.querySelector(".addplayers").addEventListener("click",(e)=>{
console.log("add players button clicked......");
});
Скриншоты
Страница входа
Manage Players Page
Событие не запускается
Любое решение, пожалуйста?