Skip to main content
2 de 4
se añadieron 282 caracteres en el cuerpo

lista y scripts

¡Hola! estoy intentando crear una lista que me permita mantener el checkbox y el scroll aunque se actualize la página y que cuando hago click en un boton 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 codigo que he escrito como podría hacer:

  1. que se mantenga el scroll aunque se actualize la página

2.he conseguido mantener el checkbox y el botón como hacerlo para el resto de items

<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;}
<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>