Gracias por ver. Tengo un programa que puede crear una lista de entradas de usuario. El programa puede agregar personas y eliminar personas (comenzando desde arriba). Este programa también limita las entradas a 7.
Cuando se alcanza el límite, la entrada más antigua de la matriz se borra y luego aparece la nueva entrada. Básicamente:
abcdefg(a es la más antigua y la g es la más nueva)
se convierte en:
bcdefgh Sin embargo, incluso si el programa ya puede agregar elementos en la matriz, lo que no puedo entender es que, aunque mi programa tiene la función pop() para eliminar personas, todavía no puedo eliminar a nadie de mi lista. Además, no se siguen las limitaciones de entrada.
¿Hay una parte que falta en mi código que hace el problema? Gracias.
var people = [7]; function myFunction() { var x = document.getElementById("list"); people.push(document.getElementById("input").value); x.innerHTML = people.join('<br/>'); } function myFunctions() { var x = document.getElementById("list"); people.pop(); console.log(people); } <!DOCTYPE html> <html> <body> <form> <input id="input" type=text> <input type=button onclick="myFunction()" value="Add" /> <input type=button onclick="myFunctions()" value="Remove" /> </form> <div id="list"> </div> </body>Por favor, comprueba si era lo que querías.
Parece que espera que las variables javascript de Vanilla sean reactivas como en vue js o react js, pero no lo hacen.
<!DOCTYPE html> <html> <style> </style> <script> var people = [7]; function myFunction() { if(people.length === 7) // you should check the array size return console.log("it can't add more people!"); var x = document.getElementById("list"); people.push(document.getElementById("input").value); x.innerHTML = people.join('<br/>'); } function myFunctions() { var x = document.getElementById("list"); people.pop(); x.innerHTML = people.join('<br/>'); // you should update the list console.log(people); } </script> <body> <form> <input id="input" type=text> <input type=button onclick="myFunction()" value="Add"/> <input type=button onclick="myFunctions()" value="Remove"/> </form> <div id="list"> </div> </body>No estoy seguro de si recuerda la definición de índice, pero se supone que una lista de matriz de 7 es [6], ya que el índice correspondiente a cada variable en la lista comienza con 0 en lugar de 1.
¡Intenta actualizar tu lista antes de ir directamente a console.log!