se puede hacer encriptador funcionable sin usar getElement? | Alura Latam

Estoy tratando de terminar de terminar el desafío del encriptador. Sin embargo, veo que los botones no funcionan. Si bien esto es un tópico propuesto por otro alumno. Queria consultar si hay una forma de que los botones funcionen sin usar getElement. Sigo los pasos del video, pero no me resulta.

código HTML

<!DOCTYPE html>
<html>
  <head>
        <meta charset="UTF-8" />
    <script src="/script.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> </title>
    <link rel="stylesheet" href="encriptador.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
      rel="stylesheet"/>
    </head>
  <body>
    <header>
      <img class="logo" src="/imagenes/Logo1X.png" />
    </header>

    <main>
      <section>
        <textarea
          class="texto_inicial" cols="30" rows="10" placeholder="Ingrese el texto aquí">
      </textarea>
        <!-- <div>
          <h6>Ingrese el texto aquí</h6>  
        </div>-->
        <div>
          <h6 class="texto_abajo">Solo letras minúsculas y sin acentos</h6>
        </div>
        <div class="botones">
          <button class="Encriptador" onclick="boton_encriptar()">
            Encriptador
          </button>
          <button class="Desencriptador">Desencriptador</button>
        </div>
      </section>
      <section>
        <textarea class="mensaje"></textarea>
        <div>
          <!-- <img class="muñeco" src="/imagenes/Muñeco.png">
            <p> <h2>Ningún mensaje fue encontrado </h2>  </p>
            <p><h3> Ingresa el texto que desea encriptar o desencriptar</h3></p>-->
          <button class="Copiar">Copiar</button>
        </div>
      </section>
    </main>
  </body>
</html>

CODIGO CSS

*{
   /* width: 1440px;
    height: 1024px;
    lo amplia demasiado*/
  background: #f3f5fc;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 150%;
}

.logo{
  width: 120px;
  height: 48px;
  gap: 40px;
}

main{
  display: flex;
  margin-bottom: 50px;
  margin-left: 80px;
}

.texto_inicial{
  border: none ;
  color: #0a3871;
  height: 700px;
  width: 900px;
  
}
::placeholder{
    color:#0a3871;
}
    .texto_inicial:focus{
        outline:none 
    }

.mensaje {
  position: fixed;
  background: #ffffff;
  background-image: url("/imagenes/Muñeco.png");
  background-repeat: no-repeat;
  border: none;
  border-radius: 36px ;
  margin-left: 100px; /*ubicacion*/
  margin-top: 20px;
  padding-left: 20px;
  color:#0a3871;
  height: 900px;/*tamaño*/
  width: 400px;
}
.mensaje:focus{
    outline:none ;
}

.texto_abajo {
  border: none;
  color: #495057;
  float: left;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; 
  opacity: 0.8;
  font-size: 24px;
  background-image: url("/imagenes/icon.svg");
  background-repeat: no-repeat;
}

.botones {
  display: flex;
  align-items: center;
  padding: 0px;
  position: absolute;
  width: 680px;
  height: 67px;
  left: 240px;
  top: 885px;
  justify-content: space-between;
}

.Encriptador {
  width: 336px;
  height: 67px;
  border-radius: 24px;
  display: flex;
  padding: 24px;
  background: #0a3871;
  border-radius: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
  color: white ;
  align-items: center;
}

.Desencriptador {
  width: 336px;
  height: 67px;
  border-radius: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  padding: 24px;
  background: #d8dfe8;
  border: 1px solid #0a3871;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin-left: 30px;
  color: blue;
  text-align: justify;
  align-items: center;
  }

.Copiar {
    width: 336px;
    height: 67px;
    border-radius: 24px;
    border: 1px solid #0a3871;
    margin-top: 810px;
    margin-left: 108px;
    position: absolute;
    margin-left: 108px;
    margin-top: px;
    color:blue;
    background: white;
    align-items: center;
   
    
  }

CODIGO JAVASCRIPT

const TextArea = document.querySelector(".texto_inicial");
const mensaje = document.querySelector(".mensaje");

function boton_encriptar() {
  const textoEncriptado = encriptar(TextArea.value)
  mensaje.value = textoEncriptado
}
function encriptar(letras) {
  let matrizCodigo = [
    ["e", "enter"],
    ["i", "imes"],
    ["a", "ai"],
    ["o", "ober"],
    ["u", "ufat"],
  ];
  letras = letras.toLowerCase()
  for (let i = 0; i < letras.length; i++) {
    if (letras.includes(matrizCodigo[i][0])) {
      letras = letras.replaceAll(matrizCodigo[i][0], matrizCodigo[i][1])
    }
  }
  return letras
}

¡Hola Maria!

Entiendo que estás teniendo problemas con el funcionamiento de los botones en tu encriptador y estás buscando una forma de hacerlos funcionar sin utilizar getElement.

Revisando tu código, veo que estás utilizando el método getElement en JavaScript para seleccionar los elementos del DOM y asignarles eventos. Sin embargo, no veo ningún problema en tu código que pueda estar causando que los botones no funcionen.

Una posible solución sería asegurarte de que el archivo script.js esté correctamente enlazado en tu archivo HTML. Verifica que la ruta del archivo sea correcta y que el archivo script.js contenga el código JavaScript que compartiste.

Además, es importante asegurarse de que los eventos estén correctamente asignados a los botones. En tu código, veo que has asignado el evento onclick al botón "Encriptador" llamando a la función boton_encriptar(). Asegúrate de que esta función esté definida en tu archivo script.js y que no haya errores de sintaxis en ella.

Si después de verificar estos puntos aún tienes problemas con el funcionamiento de los botones, sería útil que compartas más detalles sobre los errores que estás experimentando. ¿Recibes algún mensaje de error en la consola del navegador? ¿Los botones simplemente no hacen nada cuando se hace clic en ellos?

Espero que esta información te sea útil para solucionar el problema. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu encriptador!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)