Estoy tratando de hacer una sección que enumere el contenido de una consulta y termine con un enlace que cambia su nombre al hacer clic. En este contexto, 'objetos' muestra datos de una clase que luego paso a html.
{% for i in objetos %} ... <a onclick="change()" id="{{i.id}}">Fav</a> <script> function change() { var elem = document.getElementById("{{i.id}}"); if (elem.innerHTML == "Fav") elem.innerHTML = "Unfav"; else elem.innerHTML = 'Fav'; } </script> ... {% endfor %}Sin embargo, el script parece cargar solo el último valor de 'i', por lo que solo cambia el último enlace. ¿Tengo que guardarlo cada vez?
Reemplace su código con esto.
{% for i in objetos %} ... <a onclick="change(this)" id="{{i.id}}">Fav</a> ... {% endfor %} <script> function change(e) { var elem = document.getElementById(e.getAttribute('id')) if (elem.innerHTML == "Fav") elem.innerHTML = "Unfav"; else elem.innerHTML = 'Fav'; } </script>Su código renderizado real es este.
... <a onclick="change()" id="1">Fav</a> <script> function change() { var elem = document.getElementById("1"); if (elem.innerHTML == "Fav") elem.innerHTML = "Unfav"; else elem.innerHTML = 'Fav'; } </script> ... ... <a onclick="change()" id="2">Fav</a> <script> function change() { var elem = document.getElementById("2"); if (elem.innerHTML == "Fav") elem.innerHTML = "Unfav"; else elem.innerHTML = 'Fav'; } </script> ... ... <a onclick="change()" id="3">Fav</a> <script> function change() { var elem = document.getElementById("3"); if (elem.innerHTML == "Fav") elem.innerHTML = "Unfav"; else elem.innerHTML = 'Fav'; } </script> ...Inspeccionar en el navegador. Verás esto.
Entonces, cuando hace clic en primero, se llama al último, ya que coincide con el nombre de la función js. Si crea varios nombres de funciones js con el mismo nombre, la última función se usaría Es lo mismo que reasignar el valor De la misma manera en su código, la última función se llamaba siempre. De ahí estaba el problema.