javascript Array Error inside object,cant access push of undefine

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. 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. Please resolve the same. It is showing this.dataLog array as undefined.

<!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/[email protected]/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)

the array as undefined? I think you mean "array is undefined" — Hamada
– Hamada, Commented Jun 19, 2020 at 8:48
I don't undrustand good your problem; if I declare let say, in constructor we add some date like this.dataLog= ['a', 'b'] and out of the class decler let test = new LonginDisplay; test.dataLog // its log the content ['a','b'] — Hamada
– Hamada, Commented Jun 19, 2020 at 9:16

Hamada · Accepted Answer · 2020-06-19 22:28:18Z

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

Collectives™ on Stack Overflow

javascript Array Error inside object,cant access push of undefine

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related