Skip to main content
Correcciones en redacción y formato
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

¡Hola! estoyEstoy intentando crear una lista que me permita mantener el checkbox y el scroll aunque se actualice la página y que cuando hago clickhaga clic en un botón me cambie el color, he. He conseguido que se mantenga el checkbox y que me cambie el color de la caja mis.

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

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

    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?

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

¡Hola! estoy intentando crear una lista que me permita mantener el checkbox y el scroll aunque se actualice la página y que cuando hago click 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 como 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 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> 

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>

lista Lista y scriptsScripts

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

  1. que se mantenga el scroll aunque se actualizeactualice 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> 

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> 

Lista y Scripts

¡Hola! estoy intentando crear una lista que me permita mantener el checkbox y el scroll aunque se actualice la página y que cuando hago click 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 como 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 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> 
se añadieron 282 caracteres en el cuerpo
Origen Enlace

¡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> 

¡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

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

¡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> 
Origen Enlace
Loading