Todos, soy bastante nuevo en Javascript, especialmente en el uso del DOM, así que ahora llegó el momento en que decidí poner en práctica todo lo que he estado aprendiendo, pero ahora estoy atascado en un problema.
Básicamente, estoy tratando de mostrar un mensaje de error una vez que el usuario supera los 180 caracteres en el área de texto, sin embargo, parece que no puedo generar el resultado esperado.
Usando la declaración if y textContent, no puedo resolver esto. ¿Qué estoy haciendo mal? por favor ayuda y gracias.
aquí está el código:
<html> <head> <title>JavaScript & jQuery - Chapter 6: Events - Keypress</title> </head> <body> <div id="page"> <h1>List King</h1> <form id="messageForm"> <h2>My profile</h2> <textarea id="message"></textarea> <div id="charactersLeft">180 characters</div> <div id="feedback"></div> <div id="lastKey"></div> </form> </div> <script src="key.js"></script> </body> </html> var el; function charCount(e) { var textEntered, charDisplay, counter, lastKey, feedback; textEntered = document.getElementById('message').value; charDisplay = document.getElementById('charactersLeft'); counter = (180 - (textEntered.length)); charDisplay.textContent = counter; lastKey = document.getElementById('lastKey'); lastKey.textContent = ' Last key in ASCII code: ' + e.keyCode; // Displays error message var feedback = document.getElementById('feedback'); if(counter.value.length <= feedback) { feedback.textContent = ' characters must be 180 or less'; } else { feedback.textContent = ''; } } el = document.getElementById('message'); el.addEventListener('keyup', charCount, false);Está tratando de comparar una ruta que no existe en un número (counter.value.length) con un elemento dom (feedback = document.getElementById()) en if(counter.value.length <= feedback) .
Su contador es un número ya counter = 180 - textEntered.length .
Probablemente también desee establecer un var maxLength = 180 , luego:
if (counter <= maxLength) { feedback.textContent = ' characters must be 180 or less' } else { feedback.textContent = '' }