javascript object 内的数组错误，无法访问未定义的推送

Question

Here error is coming is can't access a property of undefined, In this.dataLog when I'm trying to push something in it.这里的错误是无法访问未定义的属性，在 this.dataLog 中，当我试图将某些东西推入其中时。 Please resolve the same.请同样解决。 It is showing this.dataLog array as undefined.Here error is coming is can't access a property of undefined, In this.dataLog when I'm trying to push something in it.它将 this.dataLog 数组显示为未定义。这里的错误是无法访问未定义的属性，在 this.dataLog 中，当我尝试将某些内容推入其中时。 Please resolve the same.请同样解决。 It is showing this.dataLog array as undefined.它显示 this.dataLog 数组未定义。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/9147344c85.js" crossorigin="anonymous" defer></script>
  <!-- <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.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="index.css">
  <script src="index.js" type="text/javascript" defer></script>
  <title>Document</title>
</head>

<body>

  <div class="alert alert-success height" role="alert">
    <img src="https://source.unsplash.com/random/70x100" id="main-img" class="">
    <span>NatureFresh.com</span>
  </div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a id="login-link" class="navbar-brand" href="#">Login</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle side-anchor" href="#" role="button" id="dropdownMenuLink"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Important links
    </a>
    <div id="login-back">
      <form id="login">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" id="name" aria-describedby="basic-addon1" placeholder="Username">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control"placeholder="Password" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    <div class="alert alert-success sucessful" role="alert">
      <h4 class="alert-heading">Welcome Back!</h4>
     <hr>
     <p></p>
    </div>
    <div class="dropdown-menu inside-anchor" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="https://www.facebook.com/">Facebook</a>
      <a class="dropdown-item" href="#">Twitter</a>
      <a class="dropdown-item" href="#">Gmail</a>
    </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>
</body>

</html>

class LoginDisplay {

        constructor() {
            this.dataLog=[];
        }
        render() {
            // let loginLink = document.querySelector("#login-link");
            let loginBack = document.querySelector("#login-back");
            let loginForm = document.querySelector("#login");
            let inputName = document.querySelector("#name");
            let inputEmail = document.querySelector("input[type=\"email\"]");
            let inputPassword = document.querySelector("input[type=\"password\"]");
            loginBack.classList.toggle("visible");
            loginForm.classList.toggle("visible");
            inputName.value = "";
            inputEmail = "";
            inputPassword = "";
        }
            validation() {
            let loginForm = document.querySelector("#login");
            let loginBack = document.querySelector("#login-back");
            let sucessAlert = document.querySelector("div[class=\"alert alert-success sucessful\"]");
            let inputName = document.querySelector("#name");
            let inputEmail = document.querySelector("input[type=\"email\"]");
            let inputPassword = document.querySelector("input[type=\"password\"]");
            let patt = /^[A-Za-z0-9]{2,}@[a-zA-Z0-9]{1,10}.com$/;
            let para = sucessAlert.querySelector("p");
            if (patt.test(inputEmail.value) && inputPassword.value === "dhawan") {
                loginBack.classList.toggle("visible");
                loginForm.classList.toggle("visible");
                para.innerHTML = `<h4>Namste! ${inputName.value} <i class="fas fa-check"></i></h4>`;
                inputName.value = "";
                inputEmail = "";
                inputPassword = "";
                sucessAlert.classList.toggle("visible");
                debugger;
                 this.dataLog.push(para);
             }
            // else{
            //     para.innerHTML=`<h4>`
            // }
        }
        ve(){
            console.log(this.dataLog.push("Sudhir"));
        }

    }

    let login = new LoginDisplay();
    let loginLink = document.querySelector("#login-link");
    let btn= document.querySelectorAll("button[type=\"submit\"]")[1];
    loginLink.addEventListener("click", login.render);
    btn.addEventListener("click",login.validation)

Answer 1

This is the solution to your problem, but I think it has many ways to do it.这是您问题的解决方案，但我认为它有很多方法可以解决。

class LoginDisplay {
  constructor() {
    this.dataLog = [];
  }

  render() {
    // let loginLink = document.querySelector("#login-link");
    let loginBack = document.querySelector("#login-back");
    let loginForm = document.querySelector("#login");
    let inputName = document.querySelector("#name");
    let inputEmail = document.querySelector('input[type="email"]');
    let inputPassword = document.querySelector('input[type="password"]');
    loginBack.classList.toggle("visible");
    loginForm.classList.toggle("visible");
    inputName.value = "";
    inputEmail = "";
    inputPassword = "";
  }

  validation() {
    let loginForm = document.querySelector("#login");
    let loginBack = document.querySelector("#login-back");
    let sucessAlert = document.querySelector(
      'div[class="alert alert-success sucessful"]'
    );
    let inputName = document.querySelector("#name");
    let inputEmail = document.querySelector('input[type="email"]');
    let inputPassword = document.querySelector('input[type="password"]');
    let patt = /^[A-Za-z0-9]{2,}@[a-zA-Z0-9]{1,10}.com$/;
    let para = sucessAlert.querySelector("p");

    let a = patt.test(inputEmail.value) && inputPassword.value === "dhawan";
    console.log(!a);

    if (!a) {
      loginBack.classList.toggle("visible");
      loginForm.classList.toggle("visible");
      para.innerHTML = `<h4>Namste! ${inputName.value} <i class="fas fa-check"></i></h4>`;
      inputName.value = "";
      inputEmail = "";
      inputPassword = "";
      sucessAlert.classList.toggle("visible");
      //debugger;
      return para;
    }
    // else{
    //     para.innerHTML=`<h4>`
    // }
  }
  ve() {
    console.log(this.dataLog.push("Sudhir"));
  }
}

let login = new LoginDisplay();
let loginLink = document.querySelector("#login-link");
let btn = document.querySelectorAll('button[type="submit"]')[1];
loginLink.addEventListener("click", login.render);
btn.addEventListener("click", () => {
  if (login.validation) {
    let result = login.validation();
    login.dataLog.push(result);
    console.log(login.dataLog); // Here you have your element tag HTML in your Array!
  }
});

javascript object 内的数组错误，无法访问未定义的推送

问题描述

1 个解决方案

解决方案1
2 2020-06-19 21:34:32

javascript object 内的数组错误，无法访问未定义的推送

问题描述

1 个解决方案

解决方案1 2 2020-06-19 21:34:32

解决方案1
2 2020-06-19 21:34:32