Botón de contador
soawo
Mensajes publicados
3
Estado
Miembro
-
jordane45 Mensajes publicados 30426 Fecha de registro Estado Moderador Última intervención -
jordane45 Mensajes publicados 30426 Fecha de registro Estado Moderador Última intervención -
Hola, tendré dos preguntas sobre un botón clicable que muestra el número de clics. voy a ponerte el código del contador y de su botón de reinicio.
Y aquí está el código de mi botón de reinicio.
El problema es que el botón de reinicio pone a cero pero cuando hago clic en el botón vuelve al número en el que se había detenido. He tocado algo porque antes funcionaba normalmente.
Y la segunda inquietud es que necesito este botón varias veces en la misma página, pero al poner dos solo uno funciona, aunque ya he modificado los botones y los identificadores (ids).
Aquí no logro encontrar una solución. Gracias de antemano por vuestra ayuda.
Configuración: Windows / Firefox 81.0
Y aquí está el código de mi botón de reinicio.
El problema es que el botón de reinicio pone a cero pero cuando hago clic en el botón vuelve al número en el que se había detenido. He tocado algo porque antes funcionaba normalmente.
Y la segunda inquietud es que necesito este botón varias veces en la misma página, pero al poner dos solo uno funciona, aunque ya he modificado los botones y los identificadores (ids).
Aquí no logro encontrar una solución. Gracias de antemano por vuestra ayuda.
Configuración: Windows / Firefox 81.0
3 respuestas
Hola,
Te has olvidado, en tu reset, de poner la variable count a cero.
Pero se puede hacer de otra manera... solo volver a poner el innerHTML del botón a cero y usar el siguiente código para hacer tus botones de voto
--
Cordialement,
Jordane
Te has olvidado, en tu reset, de poner la variable count a cero.
Pero se puede hacer de otra manera... solo volver a poner el innerHTML del botón a cero y usar el siguiente código para hacer tus botones de voto
<html> <head> <title>TEST</title> <meta charset="utf-8"/> <style> div.main{ width: 150px; margin-left: auto; margin-right: auto; } .btn-vote{ height: 150px;width: 150px; border-radius: 75px; border: none; background: #92c7eb; cursor:pointer; } </style> </head> <body> <div class="main"> <button id="clickme" class="btn-vote js-btn-vote"> 0</button> <button id="clickme2" class="btn-vote js-btn-vote"> 0</button> <button id="clickme3" class="btn-vote js-btn-vote"> 0</button> </div> <script> // on récupère tous les bouton ayant la class js-btn-vote var buttons = document.getElementsByClassName('js-btn-vote'); // pour chaque bouton, on gère le onclick for(let i=0; i<buttons.length;i++){ buttons[i].onclick = function(e){ this.innerHTML = parseInt(this.innerHTML) + 1; } } </script> </body> </html> --
Cordialement,
Jordane
Gracias, funciona, pero tengo otro problema: el botón restablecer solo funciona para un botón. He insertado este código en una sección solo para PC.
el botón reset funciona bien.
Pero para la sección dedicada a móviles/tabletas el botón reset no funciona. Aquí está el código
<html> <head> <title>TEST</title> <meta charset="utf-8"/> <style> div.main{ width: 150px; margin-left: auto; margin-right: auto; } .btn-vote{ height: 150px;width: 150px; border-radius: 75px; border: none; background: #92c7eb; cursor:pointer; } </style> </head> <body> <div class="main"> <button id="clickme" class="btn-vote js-btn-vote"> 0</button> </div> <script> // on récupère tous les bouton ayant la class js-btn-vote var buttons = document.getElementsByClassName('js-btn-vote'); // pour chaque bouton, on gère le onclick for(let i=0; i<buttons.length;i++){ buttons[i].onclick = function(e){ this.innerHTML = parseInt(this.innerHTML) + 1; } } </script> <script type="text/javascript"> var reset= function(){ a = 0; document.getElementById('clickme').innerHTML = 0; } </script> </a><button id ="reset" onclick="javascript:reset()" class="btn" style="vertical-align:middle"></button> </body> </html> el botón reset funciona bien.
Pero para la sección dedicada a móviles/tabletas el botón reset no funciona. Aquí está el código
</div> <div> <button id="clickme2" class="btn-vote js-btn-vote"> 0</button> </div> <script> // on récupère tous les bouton ayant la class js-btn-vote var buttons = document.getElementsByClassName('js-btn-vote'); // pour chaque bouton, on gère le onclick for(let i=0; i<buttons.length;i++){ buttons[i].onclick = function(e){ this.innerHTML = parseInt(this.innerHTML) + 1; } } </script> <script type="text/javascript"> var reset= function(){ a = 0; document.getElementById('clickme').innerHTML = 0; } </script> </a><button id ="reset" onclick="javascript:reset()" class="btn" style="vertical-align:middle"></button>
No entiendo...
Nos dijiste que ibas a tener varios botones en la misma página...
Ahora, ahora nos hablas de "sección" para PC y para móviles/tabletas... ¿qué llamas "sección"?
¿Los dos códigos que nos muestras están en el mismo archivo????
Si es así, ¿por qué haber "duplicado" mi código JS??? ¿Sabes lo que son las "funciones" y cómo funcionan???
¿Comprendes el código que te di??
¿Comprendes el código que intentaste escribir?? (lo dudo, de lo contrario tu reset apuntaría al id correcto...)
Para volver a tus "secciones" .... no me digas que "duplica" tu código HTML para manejar el caso en que estás en PC y el de móvil ....
Te invito a informarte sobre lo que es el diseño adaptable (responsive design) ... y para ayudarte con su uso, por ejemplo, de un framework CSS como Bootstrap.
Nos dijiste que ibas a tener varios botones en la misma página...
Ahora, ahora nos hablas de "sección" para PC y para móviles/tabletas... ¿qué llamas "sección"?
¿Los dos códigos que nos muestras están en el mismo archivo????
Si es así, ¿por qué haber "duplicado" mi código JS??? ¿Sabes lo que son las "funciones" y cómo funcionan???
¿Comprendes el código que te di??
¿Comprendes el código que intentaste escribir?? (lo dudo, de lo contrario tu reset apuntaría al id correcto...)
Para volver a tus "secciones" .... no me digas que "duplica" tu código HTML para manejar el caso en que estás en PC y el de móvil ....
Te invito a informarte sobre lo que es el diseño adaptable (responsive design) ... y para ayudarte con su uso, por ejemplo, de un framework CSS como Bootstrap.
De hecho uso WordPress, específicamente Elementor (que es un constructor de páginas de arrastrar y soltar) para crear mis páginas.
Y en una página puedo insertar varios elementos, como secciones, títulos, etiquetas de código HTML, botones, etc.
Y para cada elemento puedo elegir si quiero ocultarlo en ordenador, móvil, etc.
En cuanto al código no lo entiendo completamente, de hecho soy un cero en JavaScript, todavía no he empezado a aprender, quiero terminar mi sitio porque solo necesito estos contadores.
En cuanto al código he creado dos secciones en la misma página, la primera para ordenador y la segunda para móvil. Luego oculto la primera sección para móvil y tablet y oculto la segunda para ordenador. Aquí hay un video que explica lo que hago.
https://www.youtube.com/watch?v=D0-km8-7bHM
El problema es que cuando pongo el botón en otra sección no funciona.
Y en una página puedo insertar varios elementos, como secciones, títulos, etiquetas de código HTML, botones, etc.
Y para cada elemento puedo elegir si quiero ocultarlo en ordenador, móvil, etc.
En cuanto al código no lo entiendo completamente, de hecho soy un cero en JavaScript, todavía no he empezado a aprender, quiero terminar mi sitio porque solo necesito estos contadores.
En cuanto al código he creado dos secciones en la misma página, la primera para ordenador y la segunda para móvil. Luego oculto la primera sección para móvil y tablet y oculto la segunda para ordenador. Aquí hay un video que explica lo que hago.
https://www.youtube.com/watch?v=D0-km8-7bHM
El problema es que cuando pongo el botón en otra sección no funciona.
Oh la la la..... usar herramientas sin saber cómo funcionan en realidad... no es lo top...
Pero bueno,
Si tu botón debe estar presente en PC Y en Tableta ..... colócalo en una "sección" que no quede oculta ( ni en tableta , ni en PC )..
Así.. más problemitas...
Et si vraiment quieres seguir trabajando como lo haces ( no voy a tener tiempo ( ni ganas...) de formarte en la creación de sitios web... ) en ese caso continúa "duplicando" tus contenidos HTML en tus "secciones" ... pero no dupliques el código Javascript !
Pero bueno,
Si tu botón debe estar presente en PC Y en Tableta ..... colócalo en una "sección" que no quede oculta ( ni en tableta , ni en PC )..
Así.. más problemitas...
Et si vraiment quieres seguir trabajando como lo haces ( no voy a tener tiempo ( ni ganas...) de formarte en la creación de sitios web... ) en ese caso continúa "duplicando" tus contenidos HTML en tus "secciones" ... pero no dupliques el código Javascript !
<html> <head> <title>TEST</title> <meta charset="utf-8"/> <style> div.main{ width: 150px; margin-left: auto; margin-right: auto; } .btn-vote{ height: 150px;width: 150px; border-radius: 75px; border: none; background: #92c7eb; cursor:pointer; } </style> </head> <body> <div class="main"> <button id="btnPC" class="btn-vote js-btn-vote"> 0</button> <button id ="resetPC" onclick="reset('PC')" class="btn" style="vertical-align:middle">RESET PC</button> <button id="btnMobile" class="btn-vote js-btn-vote"> 0</button> <button id ="resetobile" onclick="reset('Mobile')" class="btn" style="vertical-align:middle">RESET Mobile</button> </div> <script> // on récupère tous les bouton ayant la class js-btn-vote var buttons = document.getElementsByClassName('js-btn-vote'); // pour chaque bouton, on gère le onclick for(let i=0; i<buttons.length;i++){ buttons[i].onclick = function(e){ this.innerHTML = parseInt(this.innerHTML) + 1; } } // fonction pour le reset function reset(quoi){ document.getElementById('btn'+quoi).innerHTML = 0; } </script> </body> </html>