0

Estoy intentando hacer un generador de RFC, que consisten en la primer letra del apellido paterno, la primer vocal de apellido paterno, la primer letra del apellido materno, la primer letra del nombre, los últimos dos digitos del año de nacimiento, el mes y el día.

Al ejecutar el siguiente código, me da el error Uncaught TypeError: Cannot read property 'charAt' of undefined at HTMLButtonElement.calculoRfc

Si creo un nuevo elemento con datos ya establecidos, si me corre el código, no me lo genera si quiero agarrar los datos del HTML

var pnombre = document.getElementById('nombre')
var papellidoPaterno = document.getElementById('apellidoPaterno')
var papellidoMaterno = document.getElementById('apellidoMaterno')
var pdiaNacimiento = document.getElementById('diaNacimiento')
var pmesNacimiento = document.getElementById('mesNacimiento')
var panoNacimiento = document.getElementById('anoNacimiento')
var button = document.getElementById('button')
var texto = document.getElementById('texto')
console.log(pnombre)
class persona{
    constructor(nombre, apellidoPaterno, apellidoMaterno, diaNacimiento, mesNacimiento, anoNacimiento){
        this.nombre = nombre,
        this.apellidoPaterno = apellidoPaterno,
        this.apellidoMaterno = apellidoMaterno,
        this.diaNacimiento = diaNacimiento,
        this.mesNacimiento = mesNacimiento,
        this.anoNacimiento = anoNacimiento
    }
    calculoRfc(){
        console.log("hola")
        var letra1 = (this.apellidoPaterno).charAt(0);
        for(var i=0; i<(this.apellidoPaterno).length;i++){
            if(((this.apellidoPaterno).charAt(i)=='A')||((this.apellidoPaterno).charAt(i)=='E')||((this.apellidoPaterno).charAt(i)=='I')||((this.apellidoPaterno).charAt(i)=='O')||((this.apellidoPaterno).charAt(i)=='U')){
                var letra2 = (this.apellidoPaterno).charAt(i);
                i=(this.apellidoPaterno).length;
            }
        }
        texto.innerHTML = (`${letra1}${letra2}${(this.apellidoMaterno).charAt(0)}${(this.nombre).charAt(0)}${(this.anoNacimiento).slice(2,4)}${this.mesNacimiento}${this.diaNacimiento}`)
        console.log(`${letra1}${letra2}${(this.apellidoMaterno).charAt(0)}${(this.nombre).charAt(0)}${(this.anoNacimiento).slice(2,4)}${this.mesNacimiento}${this.diaNacimiento}`)
    }
}
var datos = new persona(pnombre,papellidoPaterno,papellidoMaterno,pdiaNacimiento,pmesNacimiento,panoNacimiento)
button.addEventListener('click', datos.calculoRfc);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Generador RFC</title>
</head>
<body>
    <h1>Calcular tu RFC sin homoclave</h1>
        <input type="text" id="nombre" placeholder="Nombre">
        <input type="text" id="apellidoPaterno" placeholder="Apellido Paterno" >
        <input type="text" id="apellidoMaterno" placeholder="Apellido Materno" >
        <p class="subtitulo">FORMATO (dd)</p>
        <input type="text" id="diaNacimiento" placeholder="Día de nacimiento" >
        <p class="subtitulo">FORMATO (mm)</p>
        <input type="text" id="mesNacimiento" placeholder="Mes de nacimiento" >
        <p class="subtitulo">FORMATO (aaaa)</p>
        <input type="text" id="anoNacimiento" placeholder="Año de nacimiento" >
        <button id="button">Calcular</button>
        <p id="texto"></p>
    <script src="rfc.js"></script>
</body>
</html>

2 respuestas 2

0

El problema es que los nombre de variable contienen una referencia al elemento de cada caja de texto y no al valor en si. Por este motivo no se puede aplicar un charAt directo, si no antes de obtener su valor con la propiedad value.

Otro problema es con el this, Tener presente que el contexto (this) de una funcion es el objecto que lo invoca (en tu caso this es el boton). Te dejo un enlace para que lo leas (this en javascript).

Y por ultimo la variable letra2 la utilizas fueras del bloque donde la declaras y tbn te faltaron varios punto y comas.

Te dejo el codigo corregido, al cual solo le agrege la propiedad value y los puntos y comas.

var pnombre = document.getElementById('nombre');
var papellidoPaterno = document.getElementById('apellidoPaterno');
var papellidoMaterno = document.getElementById('apellidoMaterno');
var pdiaNacimiento = document.getElementById('diaNacimiento');
var pmesNacimiento = document.getElementById('mesNacimiento');
var panoNacimiento = document.getElementById('anoNacimiento');
var button = document.getElementById('button');
var texto = document.getElementById('texto');

class persona{
    constructor(nombre, apellidoPaterno, apellidoMaterno, diaNacimiento, mesNacimiento, anoNacimiento){
        this.nombre = nombre,
        this.apellidoPaterno = apellidoPaterno,
        this.apellidoMaterno = apellidoMaterno,
        this.diaNacimiento = diaNacimiento,
        this.mesNacimiento = mesNacimiento,
        this.anoNacimiento = anoNacimiento;
    }
    calculoRfc(){
        var letra1 = apellidoPaterno.value.charAt(0);
		var letra2 = "";
        for(var i=0; i<apellidoPaterno.value.length;i++){
            if((apellidoPaterno.value.charAt(i)=='A')||(apellidoPaterno.value.charAt(i)=='E')||(apellidoPaterno.value.charAt(i)=='I')||(apellidoPaterno.value.charAt(i)=='O')||(apellidoPaterno.value.charAt(i)=='U')){
                letra2 = apellidoPaterno.value.charAt(i);
                i=apellidoPaterno.value.length;
            }
        }
        texto.innerHTML = (`${letra1}${letra2}${apellidoMaterno.value.charAt(0)}${nombre.value.charAt(0)}${anoNacimiento.value.slice(2,4)}${mesNacimiento.value}${diaNacimiento.value}`);
    }
}
var datos = new persona(pnombre,papellidoPaterno,papellidoMaterno,pdiaNacimiento,pmesNacimiento,panoNacimiento);
button.addEventListener('click', datos.calculoRfc);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Generador RFC</title>
</head>
<body>
    <h1>Calcular tu RFC sin homoclave</h1>
        <input type="text" id="nombre" placeholder="Nombre">
        <input type="text" id="apellidoPaterno" placeholder="Apellido Paterno" >
        <input type="text" id="apellidoMaterno" placeholder="Apellido Materno" >
        <p class="subtitulo">FORMATO (dd)</p>
        <input type="text" id="diaNacimiento" placeholder="Día de nacimiento" >
        <p class="subtitulo">FORMATO (mm)</p>
        <input type="text" id="mesNacimiento" placeholder="Mes de nacimiento" >
        <p class="subtitulo">FORMATO (aaaa)</p>
        <input type="text" id="anoNacimiento" placeholder="Año de nacimiento" >
        <button id="button">Calcular</button>
        <p id="texto"></p>
    <script src="rfc.js"></script>
</body>
</html>

0

errores:

  1. solo seleccionas los input pero no tomas su valor
  2. eres de python? debes aprender que javascript utiliza ; al final de las lineas
  3. tu if solo compara letras mayusculas

nota: tambien coloque las variables dentro del addEventListener ya que apenas inicializa el documento aun no tienen valor, debes esperar al click del button para recojer su valor

class persona{
constructor(nombre, apellidoPaterno, apellidoMaterno, diaNacimiento, mesNacimiento, anoNacimiento){
    this.nombre = nombre;
    this.apellidoPaterno = apellidoPaterno.toUpperCase();
    this.apellidoMaterno = apellidoMaterno;
    this.diaNacimiento = diaNacimiento;
    this.mesNacimiento = mesNacimiento;
    this.anoNacimiento = anoNacimiento;
}

calculoRfc(){
    let letra1,letra2;
    console.log(this.apellidoPaterno);
    letra1 = this.apellidoPaterno.charAt(0);
    for(let i=0; i<(this.apellidoPaterno).length;i++){
        if(((this.apellidoPaterno).charAt(i)=='A')||((this.apellidoPaterno).charAt(i)=='E')||((this.apellidoPaterno).charAt(i)=='I')||((this.apellidoPaterno).charAt(i)=='O')||((this.apellidoPaterno).charAt(i)=='U')){
            letra2 = this.apellidoPaterno.charAt(i);
            console.log(this.apellidoPaterno);
            i=(this.apellidoPaterno).length;
        }
    }
    texto.innerHTML = (`${letra1}${letra2}${(this.apellidoMaterno).charAt(0)}${(this.nombre).charAt(0)}${(this.anoNacimiento).slice(2,4)}${this.mesNacimiento}${this.diaNacimiento}`)
    console.log(`${letra1}${letra2}${(this.apellidoMaterno).charAt(0)}${(this.nombre).charAt(0)}${(this.anoNacimiento).slice(2,4)}${this.mesNacimiento}${this.diaNacimiento}`)
}
}

button.addEventListener('click',function(){
  let pnombre = document.getElementById('nombre').value;
  let papellidoPaterno = document.getElementById('apellidoPaterno').value;
  let papellidoMaterno = document.getElementById('apellidoMaterno').value;
  let pdiaNacimiento = document.getElementById('diaNacimiento').value;
  let pmesNacimiento = document.getElementById('mesNacimiento').value;
  let panoNacimiento = document.getElementById('anoNacimiento').value;
  let button = document.getElementById('button');
  let texto = document.getElementById('texto');
  let datos = new persona(pnombre,papellidoPaterno,papellidoMaterno,pdiaNacimiento,pmesNacimiento,panoNacimiento);
  datos.calculoRfc();
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Generador RFC</title>
</head>
<body>
    <h1>Calcular tu RFC sin homoclave</h1>
        <input type="text" id="nombre" placeholder="Nombre">
        <input type="text" id="apellidoPaterno" placeholder="Apellido Paterno" >
        <input type="text" id="apellidoMaterno" placeholder="Apellido Materno" >
        <p class="subtitulo">FORMATO (dd)</p>
        <input type="text" id="diaNacimiento" placeholder="Día de nacimiento" >
        <p class="subtitulo">FORMATO (mm)</p>
        <input type="text" id="mesNacimiento" placeholder="Mes de nacimiento" >
        <p class="subtitulo">FORMATO (aaaa)</p>
        <input type="text" id="anoNacimiento" placeholder="Año de nacimiento" >
        <button id="button">Calcular</button>
        <p id="texto"></p>
    <script src="rfc.js"></script>
</body>
</html>

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.