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

Question

I am making a sample project of Visa Consultancy Software, I am using Javascript, HTML, CSS and Bootstrap and I want to open new page on clicking the home div but I am getting a error ie eventlistner is null. I am making a sample project of Visa Consultancy Software, I am using Javascript, HTML, CSS and Bootstrap and I want to open new page on clicking the home div but I am getting a error ie eventlistner is null. Kindly help me making my code correct.请帮助我使我的代码正确。

JAVASCRIPT FILE 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");   
});

Navigation Index File导航索引文件

<!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>

Login Index File登录索引文件

<!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]

Answer 1

The method document.getElementsByClassName(".home") returns an HTML Collection which don't have an addEventListener method on it, you will need to iterate over each item in the collection and bind it yourself.方法document.getElementsByClassName(".home")返回一个HTML Collection ，它没有addEventListener方法，您需要遍历集合中的每个项目并自己绑定它。 Also, you don't use the .另外，您不使用. in the name of the class, so it would be something lke this:以 class 的名义，所以它会是这样的：

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");
  })
);

Alternatively, if you know that you will only get one element with that class name or you are only interested in the first element, you can use the querySelector method instead, like so:或者，如果您知道您只会获得一个具有该 class 名称的元素，或者您只对第一个元素感兴趣，则可以使用querySelector方法，如下所示：

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

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

问题描述

1 个解决方案

解决方案1
0 2020-08-06 13:39:46

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

问题描述

1 个解决方案

解决方案1 0 2020-08-06 13:39:46

解决方案1
0 2020-08-06 13:39:46