-1

enter image description hereim trying to create a function which add users based on input value (user and pass), but i get undefined value 

let button = document.getElementById("register");

var dataBase = [];

button.addEventListener("click", function (){
      let user = document.getElementsByClassName("username").value;
      let pass = document.getElementsByClassName("password").value;
      dataBase.push({user,pass});
      console.log(dataBase)
})
<input class="username" type="text" placeholder="Enter username"/>
<input class="password" type="text" placeholder="Enter password"/>
Negatiiv
  • 9
  • 2
  • 2
    `document.getElementsByClassName("username")` returns an array of elements. You need to specify the index to access the relevant element. document.getElementsByClassName("username")[0]. You can give ids to elements and access their values by `document.getElementById("username").value`. – Lanil Marasinghe Mar 21 '21 at 12:23

3 Answers3

1

Use this code below

let button = document.getElementById("register");

var dataBase = [];

document.getElementById("submit").addEventListener("click", function (){

      let user = document.getElementById("username").value;
      let pass = document.getElementById("password").value;
      
      dataBase.push({user,pass});
      console.log(dataBase)
})
<input class="username" id="username" type="text" placeholder="Enter username"/>
<input class="password" id="password" type="text" placeholder="Enter password"/>
<button id="submit">Submit</button>
MSQ
  • 489
  • 5
  • 15
1

First of all you have to know that getElementsByClassName() returns the HTMLCollection. And that's why .value return undefined.

Best practice for getting the data by applying id to element and get it by getElementById().

So your code will be:

button.addEventListener("click", function (){
      let user = document.getElementById("myUser").value;
      let pass = document.getElementById("myPass").value;
      dataBase.push({user,pass});
      console.log(dataBase)
})

And html is:

<input class="username" id="myUser" type="text" placeholder="Enter username"/>
<input class="password" id="myPass" type="text" placeholder="Enter password"/>

But if you still want to get the value using the getElementsByClassName() then here is the solution:

let user = document.getElementsByClassName("username")[0].value;
let pass = document.getElementsByClassName("password")[0].value;

As they return the collection and assume that there is no element of that same class available in HTML DOM.

Yatinj Sutariya
  • 506
  • 5
  • 15
  • Nice answer, I would say that `.querySelector()` would be a better alternative to `getElementsByClassName()[0]`, as `querySelector()` will stop traversing the DOM once it finds the element, whereas getElementsByClassName will continue to traverse the entire DOM for all elements, even though you just need to use the first one. – Nick Parsons Mar 21 '21 at 12:56
  • 1
    Thank you!. Yes, `querySelector()` also useful in this case. – Yatinj Sutariya Mar 21 '21 at 13:42
  • now everything make sense, thanks you so much for effort – Negatiiv Mar 22 '21 at 13:58
0

Input value undefined? because getElementsByClassName() return array of element to element so to get first element document.getElementsByClassName("password")[0].value

let button = document.getElementById("register");

var dataBase = [];

button.addEventListener("click", function (){
      let user = document.getElementsByClassName("username")[0].value;
      let pass = document.getElementsByClassName("password")[0].value;
      dataBase.push({user,pass});
      console.log(dataBase)
})
<input class="username" type="text" placeholder="Enter username"/>
<input class="password" type="text" placeholder="Enter password"/>

<button id="register" >register</button>
Mohammad Ali Rony
  • 4,695
  • 3
  • 19
  • 33