Hola, estoy trabajando en el encriptador y me falta la parte de ocultar o mostrar la imagen que dice NINGUN MENSAJE FUE ENCONTRADO, igualmente quiero poder mostrar y ocultar el boton de COPIAR, mi duda principal es que no comprendo ¿Dónde debería hacerlo? en el #STYLE.CSS por medio del @media o en .HTML? es claro que la condición para mostar y ocultar estos elementos va ligada a que el textarea contenga al menos 1 caracter + pulsar el boton encriptar o desencriptar. Gracias por sus comentarios.
Encontré esta solución y me funcionó bien:
if(texto.length<1){ /*revisar la condicion a evaluar, en este caso el texto que se ingresa es menor de 1 caracter*/
muneco.style.cssText = 'visibility: visible'; /* el id del objeto.style.cssText permite enviar propiedades al objeto en el archivo de style.css, por ejemplo visibilidad*/
texto1.style.cssText = 'visibility: visible';
texto2.style.cssText = 'visibility: visible';
btncopiar.style.cssText = 'visibility: hidden';
} else {muneco.style.cssText = 'visibility: hidden';
texto1.style.cssText = 'visibility: hidden';
texto2.style.cssText = 'visibility: hidden';
btncopiar.style.cssText = 'visibility: visible';
}
Hola Estudiante,
Para ocultar o mostrar una imagen y un botón en función de una condición en JavaScript, puedes hacerlo tanto en el archivo .html como en el archivo .css. Sin embargo, te recomendaría hacerlo en el archivo .html utilizando JavaScript.
Puedes agregar un evento onclick al botón de encriptar o desencriptar que verifique si el textarea contiene al menos un carácter. Si es así, puedes mostrar la imagen y el botón de copiar utilizando el método style.display.
Aquí tienes un ejemplo de cómo hacerlo:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: none;
}
button {
display: none;
}
</style>
<script>
function mostrarElementos() {
var textarea = document.getElementById("textarea");
var imagen = document.getElementById("imagen");
var botonCopiar = document.getElementById("boton-copiar");
if (textarea.value.length > 0) {
imagen.style.display = "block";
botonCopiar.style.display = "block";
} else {
imagen.style.display = "none";
botonCopiar.style.display = "none";
}
}
</script>
</head>
<body>
<textarea id="textarea" oninput="mostrarElementos()"></textarea>
<img id="imagen" src="ningun_mensaje_fue_encontrado.png">
<button id="boton-copiar">Copiar</button>
</body>
</html>
En este ejemplo, el evento oninput se activa cada vez que se ingresa un carácter en el textarea. La función mostrarElementos verifica si el textarea tiene al menos un carácter y muestra u oculta la imagen y el botón de copiar en consecuencia.
Recuerda reemplazar "ningun_mensaje_fue_encontrado.png" con la ruta de tu imagen.
Espero que esto te ayude a resolver tu duda. ¡Buena suerte con tu proyecto de encriptador!
Espero haber ayudado y buenos estudios!