0

Ya se que el que varios botones tengan el mismo id no es una buena idea. Es más es pésima. Pero es que sino no se como hacerlo. Os cuento. Tengo una pagina que va cargando otra según se desliza hacia abajo (scroll infinito). El caso es que la pagina que carga tengo un 3 botones que tienen distinto id y cuando se les pulsa me envían a otra pagina (enviando una variable en el url). El problema y cuando se repiten los id, es cuando deslizas hacia abajo la página, que se carga la llamada articulo.php con los tres botones. Es ahora cuando estos tienen el mismo id y dejan de funcionar todos los botones. ¿Cómo puedo solucionarlo? ¿Alguna solción para que los botones aún teniendo el mism oid funcionen? Si alguien me puede ayudar lo agradecería. Cualquier cosa es útil. Muchas gracias. Estos son los tres botones:

<button id="boton_autor4" class="boton_autor"></button>
<script>
var boton_autor4 = document.getElementById('boton_autor4');
var autorperfil4 = document.getElementById('autorperfil').textContent;
botonautor4.addEventListener('click', () => {
 window.location.href = 'Perfilotros.php?autor=' + autorperfil4;
});
</script>

<button id="boton_autor5" class="boton_autor"></button>
<script>
var boton_autor5 = document.getElementById('boton_autor5');
var autorperfil5 = document.getElementById('autorperfil').textContent;
botonautor5.addEventListener('click', () => {
 window.location.href = 'Perfilotros.php?autor=' + autorperfil5;
});
<button id="boton_autor6" class="boton_autor"></button>
<script>
var boton_autor6 = document.getElementById('boton_autor6');
var autorperfil6 = document.getElementById('autorperfil').textContent;
botonautor6.addEventListener('click', () => {
 window.location.href = 'Perfilotros.php?autor=' + autorperfil6;
});

Este es el codigo que carga la pagina con los tres botones:

 <script>
        function ajax(){
        const http = new XMLHttpRequest();
        const url = 'http://localhost/Registro/articulo.php';
        http.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
              console.log(this.responseText);
              document.getElementById("response").innerHTML += this.responseText;
            }
        }
        
        http.open("GET", url);
        http.send();

        }


    $(document).ready(function(){
       
        $(document).scroll(function(){
 
            if($(document).scrollTop()+$(window).height()>=$(document).height())
            {
              
              $("body").append( ajax(),ajax(),ajax());
            }
        });
    });
    </script>
4
  • 2
    Úsalos con clases en vez de id, luego tendras que sustituir los getElementByID por getElementByClass el 13 nov. 2021 a las 16:14
  • @HeynerMartinez En articulo.php si funciona pero cuando se carga en el scroll no funciona.
    – Mariguuan
    el 13 nov. 2021 a las 16:33
  • Si generas los botones desde un ciclo, puedes hacer que el id sea diferente agregándole por ejemplo el id del autor desde una base de datos o un número que se incremente en cada iteración del ciclo.
    – DjCrazy
    el 13 nov. 2021 a las 17:03
  • ¿Estás usando jQuery solo para eventos de carga de página y desplazamiento? Te recomiendo elegir solo una opción, ya sea jQuery o Javascript puro, te puedes ahorrar muchos dolores de cabeza.
    – Triby
    el 14 nov. 2021 a las 4:13

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.