Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Rama else: restaurar el formulario
El botón se deshabilita al superar el límite, pero sigue deshabilitado después de eliminar el carácter sobrante. Agreguemos una rama else, que ya conoces: se ejecuta cuando la condición del if es falsa.
Si la longitud no supera 142, necesitamos ejecutar las dos acciones inversas: quitar la clase warning del formulario con classList.remove y habilitar el botón asignando false a disabled. La actualización del contador queda antes del condicional y funciona en ambas situaciones.
El campo vuelve a tener un texto preparado de 141 caracteres. Comprobemos qué ocurre a ambos lados del límite y después enviemos un comentario permitido. Tras enviarlo, observa el campo y el contador: los sincronizaremos en un paso aparte.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews! — comentarios</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<span class="header-logo"><img src="img/main-logo.svg" width="67" height="29" alt="Logotipo de FlashNews!"></span>
</div>
</header>
<main class="inner-news">
<article class="container">
<h1 class="inner-heading">Caminar puede ser bueno para ti</h1>
<div class="news-full">
<img src="img/walk.jpg" alt="Personas caminando">
<p>Un estudio reveló que las relaciones con nuestros seres queridos influyen más en la felicidad que el sueldo o el número de seguidores. Todavía no se sabe cómo influye la cantidad de gatitos.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
<li class="user-comment">¡Una buena razón para salir a caminar y comentar las noticias con amigos!</li>
</ol>
<form action="https://codigoheroe.com/echo" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">Tu comentario</label>
<textarea class="comment-field comment-area" rows="4" placeholder="Comentario" required id="comment-textarea">Para entender a Kant, primero hay que entenderse a uno mismo. A veces llevas felicidad a alguien y acabas entregándole un libro de filosofía.</textarea>
</div>
<span class="text-counter">Caracteres usados: <output class="char-counter" for="comment-textarea">141</output>/<span class="char-limit">142</span></span>
<button class="button submit-button" type="submit">Enviar</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo"><img src="img/white-logo.svg" alt="Logotipo de FlashNews!"></span>
</div>
</footer>
<script src="comments.js"></script>
</body>
</html>
/* Estilos preparados para el campo y el contador */
.comment-area {
height: auto;
resize: vertical;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
padding: 7px 0;
margin-right: auto;
}
/* La clase warning resalta un comentario demasiado largo */
.comment-form.warning .comment-label,
.comment-form.warning .comment-area,
.comment-form.warning .char-counter {
color: #c43d13;
}
.comment-form.warning .comment-area {
outline: 2px solid #c43d13;
}
.comment-form.warning .char-counter {
font-weight: bold;
}
/* El botón deshabilitado se ve más tenue */
.submit-button:disabled {
opacity: 0.35;
cursor: default;
}
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
let charCounter = document.querySelector('.char-counter');
let submitButton = document.querySelector('.submit-button');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
commentField.oninput = function () {
charCounter.textContent = commentField.value.length;
if (commentField.value.length > 142) {
commentForm.classList.add('warning');
submitButton.disabled = true;
} // Agrega else aquí
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- Agrega una rama
elsealif. Dentro de ella, quita la clasewarningdecommentFormy asignafalseasubmitButton.disabled. - Haz que el comentario tenga más de
142caracteres: aparecerá la advertencia y el botón se deshabilitará. Acorta el texto a142caracteres o menos: la advertencia desaparecerá y el botón volverá a estar disponible. - Envía un comentario que no esté vacío y que tenga como máximo
142caracteres. Aparecerá en la lista, el campo se vaciará y el contador seguirá mostrando el número anterior por ahora.