0

Estoy practicando con javascript y lo que trato de hacer es que pase los valores de campos de texto a un objeto. pero obtengo el error:

Uncaught TypeError: Cannot read property 'value' of null ¿ A que se debe ese error?.

Este es mi script de javascript. Lo que intento hacer es obtener los valores de los campos de texto, y almacenarlos en el objeto "user".

var uname = document.querySelector('username').value;
var ulastname = document.querySelector('userlastname').value;
var uage = document.querySelector('userage').value;
var button = document.getElementById('sender');

var user = {
    name: uname ,
    lastname: ulastname,
    age:uage
    
}

function printNameAge(person)
{
    var {name, lastname ,age} = person;
    console.log('Hello, My name is: ' + name + '.' + '\n' + 'I am: ' +  age + ' years old.');
    document.getElementById('data_pr').innerHTML = 'Hello, My name is: ' + name+ ' ' + lastname + '.' + '\n' + 'I am: ' +  age + ' years old.';
}

button.addEventListener('click', ec => 
{
    printNameAge(user);
});
<label for="username">User name: </label><input type="text" name="username" id="username">
<label for="userlastname">Last name: </label><input type="text" name="userlastname" id="userlastname">
<label for="userage">Age: </label><input type="number" name="userage" id="userage">
input id="sender" type="submit" value="send_info">

2
  • Cambia querySelector por getElementById()
    – user128299
    Commented el 14 feb. 2020 a las 19:56
  • Al intentar con get element by ID los campos de texto se mandan vacios a pesar de tener información
    – Felipe Ls
    Commented el 14 feb. 2020 a las 19:57

3 respuestas 3

0

Si usas id como selector entonces debes usar el caracter #

var uname = document.querySelector('#username').value;
var ulastname = document.querySelector('#userlastname').value;
var uage = document.querySelector('#userage').value;
var button = document.getElementById('sender');

var user = {
    name: uname ,
    lastname: ulastname,
    age:uage
    
}

function printNameAge(person)
{
    var {name, lastname ,age} = person;
    console.log('Hello, My name is: ' + name + '.' + '\n' + 'I am: ' +  age + ' years old.');
    document.getElementById('data_pr').innerHTML = 'Hello, My name is: ' + name+ ' ' + lastname + '.' + '\n' + 'I am: ' +  age + ' years old.';
}

button.addEventListener('click', ec => 
{
    printNameAge(user);
});
<label for="username">User name: </label><input type="text" name="username" id="username">
<label for="userlastname">Last name: </label><input type="text" name="userlastname" id="userlastname">
<label for="userage">Age: </label><input type="number" name="userage" id="userage">
<input id="sender" type="submit" value="send_info">

Referencia

0

No estas realizando correctamente el querySelector

Una de las formas correcta es input[name="userlastname"]

Aunque recomendaría usar getElementById

var uname = document.querySelector('input[name="username"]').value;
var ulastname = document.querySelector('input[name="userlastname"]').value;
var uage = document.querySelector('input[name="userage"]').value;
var button = document.getElementById('sender');

var user = {
  name: uname,
  lastname: ulastname,
  age: uage

}

function printNameAge(person) {
  var {
    name,
    lastname,
    age
  } = person;
  console.log('Hello, My name is: ' + name + '.' + '\n' + 'I am: ' + age + ' years old.');
  document.getElementById('data_pr').innerHTML = 'Hello, My name is: ' + name + ' ' + lastname + '.' + '\n' + 'I am: ' + age + ' years old.';
}

button.addEventListener('click', ec => {
  printNameAge(user);
});
<label for="username">User name: </label><input type="text" name="username" id="username">
<label for="userlastname">Last name: </label><input type="text" name="userlastname" id="userlastname">
<label for="userage">Age: </label><input type="number" name="userage" id="userage"><input id="sender" type="submit" value="send_info">

0

Hay varios errores en tu código, los cuales intentaré enumerar.

  1. Como bien han dicho los compañeros, si vas a usar querySelector, para alcanzar el elemento por su ID, tienes que usar esta notación: "#elId". De todos modos, te aconsejo que no mezcles estilos. Si en unas partes usas getElementById y en otra querySelector para alcanzar elementos por su id, es una mala práctica. Eso no quiere decir que uses querySelector o querySelectorAll para hacer selecciones complejas, pero no algo tan simple como seleccionar por el id.

  2. Tú estás metiendo la información dentro de un objeto que luego pasas en parámetro a la función printNameAge(person). Pero es un objeto, para obtener los datos tienes que invocar sus propiedades: person.name, person.lastname, etc.

  3. El código no está bien organizado. Por ejemplo, llenas el objeto fuera del click del botón, en el ámbito global del DOM. Eso hace que user se cree vacío, porque cuando el DOM carga los input no tienen valores. Es mejor llenar a user dentro de la función que escucha los clicks del botón. Además, si algún dato cambia en algún input, se reflejará.

  4. No obstante, sí hemos dejado en el ámbito global del DOM las referencias a los elementos, esto es una buena práctica, porque así no tienes que estar molestando al DOM a cada rato para obtener referencias de elementos que se suponen fijos en el mismo. O sea, verás que hemos quitado la propiedad .value en los querySelector y la usamos dentro de la función, cuando creamos los datos del objeto user. También hemos sacada la referencia a data_pr de la función y creamos una referencia en el ámbito global.

  5. Como última medida de seguridad, se ha preferido textContent a innerHTML, porque aquel es más seguro. Debe evitarse innerHTML cuando no vayas a manejar contenido HTML.

var uname = document.querySelector('#username');
var ulastname = document.querySelector('#userlastname');
var uage = document.querySelector('#userage');
var button = document.getElementById('sender');
var divData=document.getElementById('data_pr');
function printNameAge(person) {
  console.log('Hello, My name is: ' + person.name + '.' + '\n' + 'I am: ' + person.age + ' years old.');
  divData.textContent = 'Hello, My name is: ' + person.name + ' ' + person.lastname + '.' + '\n' + 'I am: ' + person.age + ' years old.';
}

button.addEventListener('click', ec => {
  var user = {
    name: uname.value,
    lastname: ulastname.value,
    age: uage.value
  }
  printNameAge(user);
});
<label for="username">User name: </label>
<input type="text" name="username" id="username" />
<label for="userlastname">Last name: </label>
<input type="text" name="userlastname" id="userlastname" />
<label for="userage">Age: </label>
<input type="number" name="userage" id="userage" />
<input id="sender" type="submit" value="send_info" />
<div id="data_pr"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.