Html Question posted in
Some basic documentation can be found here.

It returns me [object HTMLCollection]

i am trying to replicate a login page and i want that when i click the button it displays the name that you have putted but it returns [object HTMLCollection]

I expected to display the name that you putted

var nombre = document.getElementsByClassName("Nombre")

function entrar() {
  //borramos todo el contenido del html dentro del body
  document.body.innerHTML = "";

  //añadimos el nombre
  var Elemento = document.createElement("h1")
  Elemento.textContent = "bienvenido " + nombre;
  document.body.appendChild(Elemento)
}
.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Todo {
  display: block;
  justify-content: center;
}
<div class="Todo">
  <div class="Login">
    <h2>Nombre</h2>
    <input type="text" class="Nombre" id="Name">
  </div>
  <div class="contenedor">
    <h2 class="palabra">Contraseña</h2>
    <input type="password" id="Contraseña" class="Contraseña">
  </div>

  <button type="button" onclick=entrar()>Entrar</button>
</div>
Tags:

2

Answers


  1. 0

    Firstly, getElementsByClassName() reutrns a NodeList of elements, not a single one. You’re currently trying to write the entire NodeList object to the DOM, which is why you see the [object HTMLCollection] output.

    Secondly, you need to get the value property of the element and display that.

    Also note that using onclick, and other event attributes in your HTML, is no longer good practice. You should use unobtrusive event handlers bound within the JS code instead. You can use the addEventHandler() method to do this.

    Here’s a working example with the above issues corrected:

    const nombre = document.querySelector(".Nombre");
const button = document.querySelector('button');

button.addEventListener('click', () => {
  //borramos todo el contenido del html dentro del body
  document.body.innerHTML = "";

  //añadimos el nombre
  var Elemento = document.createElement("h1")
  Elemento.textContent = "bienvenido " + nombre.value;
  document.body.appendChild(Elemento)
});
    .contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Todo {
  display: block;
  justify-content: center;
}
    <div class="Todo">
  <div class="Login">
    <h2>Nombre</h2>
    <input type="text" class="Nombre" id="Name">
  </div>
  <div class="contenedor">
    <h2 class="palabra">Contraseña</h2>
    <input type="password" id="Contraseña" class="Contraseña">
  </div>

  <button type="button">Entrar</button>
</div>

    For some more information about the differences between getElementsByClassName(), getElementById(), querySelector(), querySelectorAll(), etc. see this question.

    Login or Signup to reply.
  2. 0

    The function getElementsByClassName() returns an ARRAY (it is "elements"), so you need to extract the first element from the result ([0]) and then get that HTML elements .value.

    Code updated below.

    var nombre = document.getElementsByClassName("Nombre")[0]

function entrar() {
  //borramos todo el contenido del html dentro del body
  document.body.innerHTML = "";

  //añadimos el nombre
  var Elemento = document.createElement("h1")
  Elemento.textContent = "bienvenido " + nombre.value;
  document.body.appendChild(Elemento)
}
    .contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Todo {
  display: block;
  justify-content: center;
}
    <div class="Todo">
  <div class="Login">
    <h2>Nombre</h2>
    <input type="text" class="Nombre" id="Name">
  </div>
  <div class="contenedor">
    <h2 class="palabra">Contraseña</h2>
    <input type="password" id="Contraseña" class="Contraseña">
  </div>

  <button type="button" onclick=entrar()>Entrar</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search