if (username.value.length >= 8) { msg.style.background = "green" msg.appendChild(validMsg) if (msg.appendChild(invalidMsg)) { msg.removeChild(invalidMsg) } }msg hace referencia a un div
validMsg e invalidMsg son ambos nodos de texto, creados a través de createTextNode
Esto se usa para agregar un mensaje de éxito y para eliminar un mensaje de advertencia en una página, si el mensaje de advertencia está presente.
Funciona sin la condición anidada, pero devuelve un error ('El nodo que se eliminará no es un elemento secundario de este nodo')
Tengo otras soluciones, pero me gustaría saber específicamente qué sucede con el if anidado. Sé que se puede usar un if para verificar las funciones de JavaScript, pero en el caso anterior, ¿está realmente ejecutando el método appendChild y luego eliminando al elemento secundario, o simplemente verificando si puede agregar el elemento Child?
También se agradecería una mejor solución utilizando el enfoque anterior.
Parece que está intentando enviar un mensaje a un usuario si el contenido de una entrada de formulario está bien. Aquí hay dos ejemplos. Sobre el uso de CSS y el resto de CSS y JavaScript.
span.invalid, span.valid { display: none; } input:invalid ~ span.invalid { display: inline; } input:valid ~ span.valid { display: inline; } <form name="form01"> <label>Username: <input type="text" name="username" minlength="8" required/> <span class="valid">OK</span> <span class="invalid">not OK</span> </label> <button>Submit</button> </form> document.forms.form01.addEventListener('submit', e => { e.preventDefault(); console.log("submit"); }); document.forms.form01.addEventListener('invalid', e => { e.preventDefault(); e.target.parentElement.querySelector('.invalid').classList.add('show'); }, true); document.forms.form01.addEventListener('input', e => { e.target.parentElement.querySelector('.invalid').classList.remove('show'); }, false); span.invalid { display: none; } span.show { display: inline; } <form name="form01"> <label>Username: <input type="text" name="username" minlength="8" required/> <span class="invalid">not OK</span> </label> <button>Submit</button> </form>Gracias por las respuestas.
Lo probé nuevamente y eliminé el código entre las llaves, a saber:
msg.removeChild(invalidMsg)Esto hace que aparezcan en la página mensajes tanto válidos como no válidos, por lo que
if (msg.appendChild(invalidMsg))está agregando el invalidMsg. El método removeChild lo está quitando de nuevo.
Todo funciona exactamente igual si así:
if (username.value.length >= 8) { msg.style.background = "green" msg.appendChild(validMsg) msg.appendChild(invalidMsg) msg.removeChild(invalidMsg) }