1

Estoy comenzando a aprender html y js, tengo el siguiente problema:

Estoy intentando que la variable finalTxt se muestre en mi innerHTML. Cuando pongo otras variables o texto sí las muestra. El programa es para cifrar una palabra con el Cifrado César dejando que el usuario elija el offset.

html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Semillas</title>
    <link rel="stylesheet" href="style.css"/>
    <link href="https://fonts.googleapis.com/css?family=Ropa+Sans&display=swap" rel="stylesheet">
</head>
<body>
      Nombre de usuario: <input type="text" id="nText">

      Número de la suerte: <input type="number" id="offNumber" min="0" max="26">

    <input id="cipher" class="send-btn" type="button" value="Send"/>

<div id="showResult"></div>



</body>
<script src="cipher.js"> </script>
</html>

js:

var cipherFunction = document.getElementById('cipher');
var decipherFunction = document.getElementById('decipher');

cipherFunction.addEventListener("click", cipher);
if(decipherFunction){
decipherFunction.addEventListener("click", decipher);
}

function cipher (offNum, nTxt) {
  var nTxt = document.getElementById('nText').value;
  var offNum = parseInt(document.getElementById("offNumber").value);
  var i=0;
  var finalTxt = " ";

    for (i=0; i<=nTxt.length; i++){

      r=(nTxt.charCodeAt(i) -65 +offNum) %26 +65;
      var finalTxt= String.fromCharCode(r);
console.log(finalTxt);
document.getElementById("showResult").innerHTML = finalTxt;
}
}


function decipher (offNum, nTxt) {

}


3 respuestas 3

1

Eso es porque el contenido estás reeemplazando con cada letra que obtienes con un espacio al final haciendo que no se muestre nada. Cambiando un poco tu código.

var cipherFunction = document.getElementById('cipher');
var decipherFunction = document.getElementById('decipher');

cipherFunction.addEventListener("click", cipher);
if(decipherFunction){
  decipherFunction.addEventListener("click", decipher);
}

function cipher (offNum, nTxt) {
  var nTxt = document.getElementById('nText').value;
  var offNum = parseInt(document.getElementById("offNumber").value);
  var i=0;
  var finalTxt = " ";
  
  document.getElementById("showResult").innerHTML = "";

  for (i=0; i<nTxt.length; i++){
    r=(nTxt.charCodeAt(i) -65 +offNum) %26 +65;
    var finalTxt= String.fromCharCode(r);
    console.log(finalTxt);
    document.getElementById("showResult").innerHTML += finalTxt;
  }
}


function decipher (offNum, nTxt) {

}
Nombre de usuario: <input type="text" id="nText">
Número de la suerte: <input type="number" id="offNumber" min="0" max="26">
<input id="cipher" class="send-btn" type="button" value="Send"/>

<div id="showResult"></div>

1

Paso 1

Recomendación: Asigna el div en el cual deseas mostrar el resultado a una variable de este modo:

let showResult = document.getElementById('showResult')

Paso 2

Posterior, si revisas el resultado del console.log verás que obtienes un resultado como este:

"H"
"S"
"M"
"H"
""

Lo cual hace que cuando asignas el valor calculado por medio de innerHTML tome el último que es un espacio vacío y haga lucir como si no se viera nada.

Entonces puedes hacer lo siguiente:

al resultado le concatenas con + cada valor recuperado resultado de las iteraciones así de modo que en lugar de escribir en el div ese vacío tome cada una de las letras generadas las junte y lo muestre como el resultado final:

showResult.innerHTML += finalTxt;

Paso 3

Y de paso a tu for le haces la siguiente modificación:

Pasas de esto:

for (i=0; i<=nTxt.length; i++){

A esto:

for (i=0; i<nTxt.length; i++){

Nota

Lo anterior para que el resultado no genere esto "" lo cual fue una de las causas que hacía lucir como su tu div se quedara vacío

Lo anterior lo puedes comprobar si:

  • Dejas tu for con la condición de <
  • Ingresas el texto perro
  • Ingresas el número 2

Lo anterior te dará como resultado en consola:

"X"
"M"
"Z"
"Z"
"W"

Si evitas hacer uso de += y solo asignas con =, entonces el único valor que verás en el div será:

W

Que es la última letra generada

1

Aparte de lo que te han dicho los compañeros, observo algunas malas prácticas en tu código y me permito hacerte algunas recomendaciones.

  • Crear una referencia global a los elementos fijos, luego en las diferentes funciones donde necesites alguna propiedad de esos elementos usas su referencia. Esto evitará estar llamando constantemente a document.getElementById, lo cual tiene su costo para al rendimiento.
  • Evitar modificar elementos del DOM dentro de bucles. Esto haría que el DOM tenga que recargarse cada vez para asumir esa modificación. En esos casos es mejor recoger los resultados en una variable dentro del bucle y una vez sales del bucle modificas una sola vez el elemento, no N veces, donde N es el número de iteracciones del bucle. Esta es una de las malas prácticas más expandidas en la red. Imagina un bucle con 10,000 iteracciones, estarías modificando el DOM 10,000 veces.
  • Con respecto a la seguridad, la documentación recomienda dar preferencia a textContent con respecto a innerHTML cuando el contenido que se está manejando es texto simple. El problema es innerHTML es menos seguro, y podría admitir en cierto casos tipos de ataque XSS.

He aplicado todo esto en el código de más abajo. He hecho algunas pruebas y comentarios, de modo que puedas comprender lo antes afirmado cuando revises las modificaciones.

/*Referencias a los elementos fijos*/
const cipherFunction = document.getElementById('cipher');
const decipherFunction = document.getElementById('decipher');
const elTxt = document.getElementById('nText');
const elNumber = document.getElementById("offNumber");
const showResult = document.getElementById("showResult");

cipherFunction.addEventListener("click", cipher);
if (decipherFunction) {
  decipherFunction.addEventListener("click", decipher);
}

function cipher(offNum, nTxt) {
  /*Usamos las referencias ya creadas para obtener los value actuales*/
  var nTxt = elTxt.value;
  var offNum = parseInt(elNumber.value);
  var i = 0;
  var finalTxt = "";

  //showResult.innerHTML = ""; *Esto no tiene sentido*

  for (i = 0; i < nTxt.length; i++) {
    r = (nTxt.charCodeAt(i) - 65 + offNum) % 26 + 65;
    finalTxt += String.fromCharCode(r);
    //showResult.innerHTML += finalTxt; *MALA PRÁCTICA (ver test)*

    /*Test como evidencia de una mala práctica*/
    console.log(`${finalTxt} : Si modificas un elemento del DOM aquí, éste se actualizará por cada caracter afectando el rendimiento`);
  }
  /*Aquí el DOM se actualiza una sola vez, no N veces*/
  showResult.textContent += finalTxt;
}

function decipher() {
  /*Obtener valores in situ, coo cipher*/
}
Nombre de usuario: <input type="text" id="nText"> Número de la suerte: <input type="number" id="offNumber" min="0" max="26">
<input id="cipher" class="send-btn" type="button" value="Send" />

<div id="showResult"></div>

Tu Respuesta

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

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