javascript – How to print the letter of the DNI?

Question:

I have managed to create a program that shows me the letter of the DNI by entering the number at a prompt. The problem is that now a function can not be created to achieve the same but instead printing on the screen. Directly, with the program that I have and correcting what is necessary, show me this form and then print me the same thing that it does with the alert .

The code is not working as I have tried to make a function and it did not get it right. Removing that function and the form from the html does work.

 var resto = 0 var letra = "" function myLetra (){ do { var numero = document.getElementsByName("numer") if (Number(numero) == numero) { numero = Number(numero) if (numero >= 0 && numero <= 99999999) { //CALCULAMOS EL RESTO DE DIVIDIR EL NÚMERO ENTRE 23 resto = numero % 23 //SEGÚN SEA EL RESTO ASIGNAMOS UN VALOR A LA VARIABLE LETRA switch (resto) { case 0: letra = "T" break case 1: letra = "R" break case 2: letra = "W" break case 3: letra = "A" break case 4: letra = "G" break case 5: letra = "M" break case 6: letra = "Y" break case 7: letra = "F" break case 8: letra = "P" break case 9: letra = "D" break case 10: letra = "X" break case 11: letra = "B" break case 12: letra = "N" break case 13: letra = "J" break case 14: letra = "Z" break case 15: letra = "S" break case 16: letra = "Q" break case 17: letra = "V" break case 18: letra = "H" break case 19: letra = "L" break case 20: letra = "C" break case 21: letra = "K" break case 22: letra = "E" break default: //SI NO ES UN NÚMERO ENTRE 0 Y 22 MOSTRAMOS UN ERROR alert("Numero erroneo") } } //MOSTRAMOS MENSAJE CON EL DNI Y LA LETRA OBTENIDA alert("Numero: " + numero + ", Letra: " + letra) } //SI NO ES UN NÚMERO else { //SI SE PULSÓ ACEPTAR SIN PONER UN NÚMERO if (numero != undefined) { alert(numero + " No es un numero") } } //MIENTRAS NO SE PULSE CANCELAR VUELVE ARRIBA } while (numero != undefined) }
 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Averigua letra</title> </head> <body> <form name="form" action="" method="get"> <input type="text" name="numer" placeholder="escribe nº del dni"> </form> <button ondblclick="myLetra">Tu letra</button> </body> </html>

Answer:

You have several problems in your code, first to call a function with double click you must place the function with parentheses ondblclick="myLetra()" inside the button.

Then to retrieve the <input> you use document.getElementsByName() , which is not the most appropriate, for this case document.getElementById() is better since it returns a single element.

Then to retrieve characters from numbers, instead of using switch you can put all the characters in an array and then get them according to the index:

letras=["T","R","W","A","G","M","Y","F","P","D","X","B","N","J","Z","S","Q","V","H","L","C","K","E"];
//por ejemplo esto mostrará la letra en la posición 0, que es T
letras[0];

Finally, to show the message on the page instead of an alert() you can use a <span> and place text in it with innerHTML .

The working code is as follows:

 var resto = 0 var letra = "" function myLetra (){ //do { var numero = document.getElementById("numero").value; if (Number(numero) == numero) { numero = Number(numero) if (numero >= 0 && numero <= 99999999) { //CALCULAMOS EL RESTO DE DIVIDIR EL NÚMERO ENTRE 23 resto = numero % 23 //SEGÚN SEA EL RESTO ASIGNAMOS UN VALOR A LA VARIABLE LETRA letras=["T","R","W","A","G","M","Y","F","P","D","X","B","N","J","Z","S","Q","V","H","L","C","K","E"]; letra=letras[resto]; } //MOSTRAMOS MENSAJE CON EL DNI Y LA LETRA OBTENIDA //alert("Numero: " + numero + ", Letra: " + letra) document.getElementById("mostrar").innerHTML="Numero: " + numero + ", Letra: " + letra; } //SI NO ES UN NÚMERO else { //SI SE PULSÓ ACEPTAR SIN PONER UN NÚMERO if (numero != undefined) { document.getElementById("mostrar").innerHTML="No es un número"; } } //MIENTRAS NO SE PULSE CANCELAR VUELVE ARRIBA //} while (numero != undefined) }
 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Averigua letra</title> </head> <body> <form name="form" action="" method="get"> <input type="text" id="numero" placeholder="escribe nº del dni"> </form> <button ondblclick="myLetra()">Tu letra</button><br> <span id="mostrar" ></span> </body> </html>

I hope it helps you, greetings.

Scroll to Top