如何通过单击动态侧栏中的子菜单打开新页面

我正在制作Visa咨询软件的示例项目，我正在使用Javascript、HTML、CSS和Bootstrap，我想在点击主页div时打开新页面，但我收到了一个错误，即eventlistner为空请帮助我更正代码。

JAVASCRIPT文件

document.querySelector(".btn").addEventListener('click', (e)=>{
document.querySelector(".forget").innerHTML="";
document.querySelector(".password").innerHTML="";
document.querySelector(".email").innerHTML="";
var mail = document.getElementById("maile").value;
var password = document.getElementById("pasw").value;
if (mail == "" && password== "") {
document.querySelector(".forget").innerHTML="Please enter the email id and password";
}
else if (password == "") {
document.querySelector(".password").innerHTML="Please enter the password.";
}
else if (mail==""){
document.querySelector(".email").innerHTML="Please enter the e-mail id";
}
else if (mail=== "himanshusingla256@gmail.com" && password==="1234")
{
window.open("file:///C:/Users/DITSPC3/Desktop/Visa%20Consultancy/Navigation.html");
}
else
{
document.querySelector(".forget").innerHTML="Incorrect email or password";
}
e.preventDefault();
});
function Sidebar()
{
// Container
var onediv= document.createElement('div');
onediv.className= "container1";
onediv.style.background = "lightgray";
onediv.id = "block";
onediv.style.width="20%";
onediv.style.color="white";
onediv.style.overflow="hidden";
onediv.style.display= "inline-block";
document.body.appendChild(onediv);
// row
var row= document.createElement('div');
row.className= "row";
row.id= "row1";
row.style.overflow="hidden";
document.body.appendChild(onediv).appendChild(row);
// column
var one8 = document.createElement('div');
one8.innerHTML="Home";
one8.className="col1 home";
one8.style.fontSize="35px";
one8.style.overflow="hidden";
one8.style.height="158px";
one8.style.paddingLeft="25px";
one8.id="block1";
document.body.appendChild(onediv).appendChild(one8);
var o1= document.createElement('div');
o1.innerHTML="Appointment";
o1.className="col1 appointment";
o1.href="index.html" ;
o1.style.overflow="hidden";
o1.style.fontSize="35px";
o1.style.height="158px";
o1.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o1);
var o2= document.createElement('div');
o2.innerHTML="Manage Documents";
o2.className="col1 document";
o2.style.height="158px";
onediv.style.overflow="hidden";
o2.style.fontSize="35px";
o2.style.paddingLeft="25px";

document.body.appendChild(onediv).appendChild(o2);
var o3= document.createElement('div');
o3.innerHTML="Courses";
o3.className="col1 course";
o3.style.fontSize="35px";
o3.style.overflow="hidden";
o3.style.height="158px";
o3.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o3);
var o4= document.createElement('div');
o4.innerHTML="Applicant Data";
o4.className="col1 applicant";
o4.style.fontSize="35px";
o4.style.overflow="hidden";
o4.style.height="158px";
o4.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o4);
var o5= document.createElement('div');
o5.innerHTML="Log-Out";
o5.className="col1 out";
o5.style.fontSize="35px";
o5.style.overflow="hidden";
o5.style.height="158px";
o5.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o5);
}
// Sidebar();
document.getElementsByClassName(".home").addEventListener('click', ()=> {
window.open("home.html");   
});

导航索引文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation Bar</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="logo" onload="Sidebar()">
<div class="container" style="max-width: 100%;">
<div class="row" >
<div class="col">
<h5> E-mail= Himanshusingla256@gmail.com</h5>
</div>
<div class="col">
<h5> Contact= 7589832256</h5> 
</div>
</div>
</div>

<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>
<script src="app.js"></script>
</body>
</html>

登录索引文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<title> Singla Visa Consultancy</title>
</head>
<body class="log">


<div class="container2">
<div class="row">
<h1> Visa Consultancy Software </h1>
</div>
<div class="row1">
<form > 
<!-- <div class="form-group"> -->
<label for="exampleInputEmail1" style="color: white;">E-mail:</label>
<input type="text" class="form-control" placeholder="E-mail" id="maile">
<label for="email" class="email" style="color: red;"></label>                     
<!-- </div> -->
<br>

<!-- <div class="form-group"> -->
<label for="exampleInputPassword1" style="color: white;">Password:</label>
<input type="password" class="form-control" placeholder="password" id="pasw" >
<!-- <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->
<label for="passw" class="password" style="color: red;"></label>
<!-- </div> -->
<br>
<div class="row">
<div style="color: seashell;margin-left: 5% ;">Forget Password?
<br>
<label for="forget" class="forget" style="color: red;"></label>
</div>
</div>

<button type="submit" class="btn btn-success" style="background: transparent;">Login</button>
<br>
<br>
<h6 style="color: white; text-align: right;">Not registered? <a href="file:///C:/Users/DITSPC3/Desktop/Visa%20Consultancy/Register.html?email=&submit=Submit" target="_blank" style="color:  #4caf50;">Create an account</a></h6>
</form>
</div>
</div>
</body>

<!-- <script src="bootstrap.min.js" type="text/javascript.js"></script> -->
<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>
<script src="app.js"></script>

</html>[enter image description here][1]

方法document.getElementsByClassName(".home")返回一个没有addEventListener方法的HTML Collection，您需要迭代集合中的每个项并自己绑定它。此外，在类的名称中不使用.，因此它将是类似于以下内容的：

const allElements = document.getElementsByClassName("home"); // <-- No dot in the name
allElements.forEach(home => home.addEventListener('click', () => {
// Do what you want here
window.open("home.html");
})
);

或者，如果你知道你只会得到一个具有该类名的元素，或者你只对第一个元素感兴趣，你可以使用querySelector方法，如下所示：

document.querySelector(".home").addEventListener('click', () => {
// Do what you want here
window.open("home.html");
});

相关内容

最新更新

热门标签：