2

Estoy intentando crear una lista que me permita mantener el checkbox y el scroll aunque se actualice la página y que cuando haga clic en un botón me cambie el color. He conseguido que se mantenga el checkbox y que me cambie el color de la caja.

Mis dudas son las siguientes para el código que he escrito: ¿cómo podría hacer?

  1. Que se mantenga el scroll aunque se actualice la página

  2. He conseguido mantener el checkbox y el botón. ¿Cómo hacerlo para el resto de ítems?

<style>
    .caja{border:black solid 2px; 
        width:100px; 
       margin: 20px;
        text-align: center;}
    .caja.verde{border:black solid 2px;
        background: green; 
        width:100px; 
        margin: 20px;
        text-align: center;}

</style>

    <body>
    <div class='caja' id='caja'>PEPINO</div>
    <input type='checkbox'  id='0'>
    <input type='number' name='cantidad' style='width: 3em'>
    <button id='btncomprado'>comprado</button><br>

    <div class='caja' id='caja1'>manzana</div>
    <input type='checkbox'  id='1'>
    <input type='number' name='cantidad' style='width: 3em'>
    <button id='btncomprado1'>comprado</button><br>

    <div class='caja' id='caja2'>pomelo</div>
    <input type='checkbox'  id='2'>
    <input type='number' name='cantidad' style='width: 3em'>
    <button id='btncomprado2'>comprado</button><br>
        <script>
                var btn= document.getElementById('btncomprado'),
                caja=document.getElementById('caja'),
                contador=0;
                function cambio()
                {   if(contador==0)
                {
                caja.classList.add('verde');
                contador=1
                    }
                else{caja.classList.remove('verde');
                contador=0;}   
                }
                    btn.addEventListener('click',cambio,true)
        </script> 
        <script>
                checkbox = document.getElementById('0')
                checkbox.checked = eval(window.localStorage.getItem(checkbox.id))
                checkbox.addEventListener('change', function(){
                window.localStorage.setItem(checkbox.id, checkbox.checked)
                    })
                </script> 
</body>



</html>

1 respuesta 1

0

Para mantener el scroll aunque se actualice la página, puedes usar el método scrollTo() en el evento onload del objeto window para que la página se desplace a la posición donde se encontraba antes de la actualización. Por ejemplo:

<script>
    window.onload = function() {
        var scrollPos = localStorage.getItem('scrollPos');
        if (scrollPos) {
            window.scrollTo(0, scrollPos);
        }
    };
    window.onbeforeunload = function() {
        localStorage.setItem('scrollPos', window.scrollY);
    };
</script>

Para mantener el estado de los checkboxes y botones para el resto de los elementos, puedes crear una función que reciba como parámetro el id del elemento y usarla en los eventos correspondientes, guardando la informacion tal y como lo hacias para el checkbox en el localStorage

Quedaria algo así: (si hay algun error, sorry y avisa)

<script>
    function setEstado(elemento) {
        var checkbox = document.getElementById(elemento.id),
            btn = document.getElementById('btncomprado' + elemento.id),
            caja = document.getElementById('caja' + elemento.id),
            estado = eval(window.localStorage.getItem(checkbox.id));
        checkbox.checked = estado;
        if (estado) {
            caja.classList.add('verde');
        }
        btn.addEventListener('click', function() {
            if (caja.classList.contains('verde')) {
                caja.classList.remove('verde');
                estado = false;
            } else {
                caja.classList.add('verde');
                estado = true;
            }
            window.localStorage.setItem(checkbox.id, estado);
        }, true);
    }
    setEstado({id: 0});
    setEstado({id: 1});
    setEstado({id: 2});
</script>
2
  • Buenos días me da error en btn.addEventListener('click', function() me dice en el navegador que cannot read propierties of null,
    – Oscar Gata
    Commented el 22 mar. 2023 a las 10:52
  • Muchas gracias por tu respuesta, me explique mal, no es un scroll es el input number, el que queria que se mantuviese perdona
    – Oscar Gata
    Commented el 22 mar. 2023 a las 10:53

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.