lo que me gustaría son 2 campos de entrada con un botón de envío. el primer campo es la solicitud de un nombre de usuario, el segundo campo es una contraseña.
si el usuario presiona enviar, el valor de los campos debe estar debajo de él. pero por una razón no funciona del todo. si el usuario presiona enviar un segundo, el resultado se escribe después. y la intención es que el texto del primer envío sea completamente reemplazado.
Además, la función de verificación no funciona.
¿alguien podría ayudar?
var titles = []; var usernameInput = document.getElementById("username"); var passwordBox = document.getElementById("password"); var messageBox = document.getElementById("display"); function CHECKER() { if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") { user.title.value = ""; alert("GEEF EEN GELDIGE WAARDE AUB"); } } function insert() { titles.push(usernameInput.value); titles.push(passwordBox.value); clearAndShow(); } function clearAndShow() { usernameInput.value = ""; passwordBox.value = ""; messageBox.innerHTML = ""; messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>"; } <html> <head></head> <body> <div class="wb-stl-custom3"> <label for="username">gebruikersnaam:</label> </div> <div> <input id="username" type="text" maxlength="15" onkeyup="CHECKER()"> </div> <div class="wb-stl-custom3" ;> <label for="password">wachtwoord: </label> </div> <div> <input id="password" type="password" maxlength="30" onkeyup="CHECKER()"> </div> <input type="submit" value="CHECH" onclick="insert()" /> <div class="wb-stl-custom3" , id="display"></div> </body> </html>Cambié su CHECKER() para que verifique cada campo de entrada. Su código se escribió explícitamente para agregar y no reemplazar contenido en su matriz de titles . Si desea que se reemplacen los valores, necesitará algo como lo siguiente:
var titles = []; var usernameInput = document.getElementById("username"); var passwordBox = document.getElementById("password"); var messageBox = document.getElementById("display"); function CHECKER(inp) { if (!inp.value.match(/[a-zA-Z]$/) && inp.value != "") { inp.value = ""; alert("GEEF EEN GELDIGE WAARDE AUB"); } } function insert() { titles=[usernameInput.value, passwordBox.value]; clearAndShow(); } function clearAndShow() { usernameInput.value = ""; passwordBox.value = ""; messageBox.innerHTML = ""; messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>"; } <html> <head></head> <body> <div class="wb-stl-custom3"> <label for="username">gebruikersnaam:</label> </div> <div> <input id="username" type="text" maxlength="15" onkeyup="CHECKER(this)"> </div> <div class="wb-stl-custom3" ;> <label for="password">wachtwoord: </label> </div> <div> <input id="password" type="password" maxlength="30" onkeyup="CHECKER(this)"> </div> <input type="submit" value="CHECH" onclick="insert()" /> <div class="wb-stl-custom3" , id="display"></div> </body> </html>