Как открыть новую страницу, щелкнув подменю в боковой панели Dynami c - PullRequest
0 голосов
/ 06 августа 2020

Я делаю образец проекта Visa Consultancy Software, я использую Javascript, HTML, CSS и Bootstrap, и я хочу открыть новую страницу, щелкнув домашний div, но получаю сообщение об ошибке ie eventlistner имеет значение null. Пожалуйста, помогите мне исправить мой код.

JAVASCRIPT FILE

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]

1 Ответ

0 голосов
/ 06 августа 2020

Метод document.getElementsByClassName(".home") возвращает HTML Collection, в котором нет метода addEventListener, вам нужно будет перебрать каждый элемент в коллекции и связать его самостоятельно. Кроме того, вы не используете . в имени класса, поэтому это будет что-то вроде этого:

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

В качестве альтернативы, если вы знаете, что вы получите только один элемент с этим классом name или вас интересует только первый элемент, вы можете вместо этого использовать метод querySelector, например:

document.querySelector(".home").addEventListener('click', () => {
  // Do what you want here
  window.open("home.html");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...