Bouton compteur
Fermé
soawo
Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
10 octobre 2020
-
9 oct. 2020 à 16:23
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 10 oct. 2020 à 01:43
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 10 oct. 2020 à 01:43
A voir également:
- Bouton compteur
- Bouton on off ✓ - Forum Loisirs / Divertissements
- Bouton shift pc ✓ - Forum Windows
- Taille bouton css - Forum HTML
- Allumer pc sans bouton ✓ - Forum Matériel informatique
- Compteur de pas - Télécharger - Sport
3 réponses
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
9 oct. 2020 à 18:36
9 oct. 2020 à 18:36
Bonjour,
Tu as oublié, dans ton reset, de mettre la variable count à zéro.
Mais on peut faire autrement... juste remettre le innerHTML du bouton à zéro et utiliser le code suivant pour faire tes boutons de vote
Tu as oublié, dans ton reset, de mettre la variable count à zéro.
Mais on peut faire autrement... juste remettre le innerHTML du bouton à zéro et utiliser le code suivant pour faire tes boutons de vote
<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>
soawo
Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
10 octobre 2020
9 oct. 2020 à 22:50
9 oct. 2020 à 22:50
Merci ça fonctionne mais j'ai un autre soucis le bouton reset ne fonctionne que pour un bouton.
J'ai insérer ce code dans une section pour pc seulement.
le bouton reset fonctionne bien.
Par contre pour la section dedié aux mobiles/tablettes
le bouton reset ne fonctionne pas. Voici le code
J'ai insérer ce code dans une section pour pc seulement.
<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>
le bouton reset fonctionne bien.
Par contre pour la section dedié aux mobiles/tablettes
le bouton reset ne fonctionne pas. Voici le code
</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>
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
10 oct. 2020 à 01:11
10 oct. 2020 à 01:11
Je ne comprends pas....
Tu nous as dit que tu allais avoir plusieurs boutons sur la même page....
Là, maintenant, tu nous parles de "section" pour PC et pour mobiles/tablettes .... qu'est-ce que tu appelles "section" ??
Les deux codes que tu nous montres sont dans le même fichier ????
Si oui, pourquoi avoir "dupliqué" mon code JS ??? Sais tu ce que sont les "fonctions" et comment ça marche ???
Comprends tu le code que je t'ai donné ??
Comprends tu le code que tu as essayé d'écrire ?? ( j'en doute, sinon ton reset pointerait sur le bon id... )
Pour en revenir à tes "sections" .... ne me dis pas que tu "dupliques" ton code html pour gérer le cas où tu es sur PC et celui où tu es sur mobile ....
Je t'invite à te renseigner sur ce qu'est le responsive design ... et pour t'y aider, à l'utilisation, par exemple, d'un framework css tel que bootstrap.
Tu nous as dit que tu allais avoir plusieurs boutons sur la même page....
Là, maintenant, tu nous parles de "section" pour PC et pour mobiles/tablettes .... qu'est-ce que tu appelles "section" ??
Les deux codes que tu nous montres sont dans le même fichier ????
Si oui, pourquoi avoir "dupliqué" mon code JS ??? Sais tu ce que sont les "fonctions" et comment ça marche ???
Comprends tu le code que je t'ai donné ??
Comprends tu le code que tu as essayé d'écrire ?? ( j'en doute, sinon ton reset pointerait sur le bon id... )
Pour en revenir à tes "sections" .... ne me dis pas que tu "dupliques" ton code html pour gérer le cas où tu es sur PC et celui où tu es sur mobile ....
Je t'invite à te renseigner sur ce qu'est le responsive design ... et pour t'y aider, à l'utilisation, par exemple, d'un framework css tel que bootstrap.
soawo
Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
10 octobre 2020
10 oct. 2020 à 01:24
10 oct. 2020 à 01:24
Enft j'utilise wordpress, precisement elementor (qui est une constructeur de page en glisser-déposer) pour construire mes pages.
Et sur une page je peux inserer plusieurs elements, comme des sections, des titre des balise de code html, des bouton etcc.
Et pour chaque éléments je peux choisir si je veux le masquer sur pc mobile etc
Pour ce qui est du code je ne le comprends pas entierment enft je suis nul en javascript, j'ai pas encore commencer a apprendre je veux d'abord terminer mon site vu que j'ai juste besoin de ces compteur.
Pour ce qui est du code j'ai creer deux section sur la meme page, la première pour les pc et la deuxieme pour les mobile. Ensuite je masque la premiere section pour mobile et tablette et je masque la deuxieme pour les ordinateur.Voici une vidéo qui explique ce que je fais.
https://www.youtube.com/watch?v=D0-km8-7bHM
Le soucis c'est que quand je met le bouton dans une autre section il ne fonctionne pas.
Et sur une page je peux inserer plusieurs elements, comme des sections, des titre des balise de code html, des bouton etcc.
Et pour chaque éléments je peux choisir si je veux le masquer sur pc mobile etc
Pour ce qui est du code je ne le comprends pas entierment enft je suis nul en javascript, j'ai pas encore commencer a apprendre je veux d'abord terminer mon site vu que j'ai juste besoin de ces compteur.
Pour ce qui est du code j'ai creer deux section sur la meme page, la première pour les pc et la deuxieme pour les mobile. Ensuite je masque la premiere section pour mobile et tablette et je masque la deuxieme pour les ordinateur.Voici une vidéo qui explique ce que je fais.
https://www.youtube.com/watch?v=D0-km8-7bHM
Le soucis c'est que quand je met le bouton dans une autre section il ne fonctionne pas.
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
10 oct. 2020 à 01:43
10 oct. 2020 à 01:43
Ah la la la..... utiliser des outils sans savoir comment ils fonctionnent en réalité... ce n'est pas le top...
Mais bon,
Si ton bouton doit être présent sur PC ET sur Tablette ..... place le dans une "section" qui ne sera pas masquée ( ni sur tablette , ni sur PC )..
Comme ça.. plus de soucis...
Et si vraiment tu veux continuer à bosser comme tu le fais ( je ne vais pas avoir le temps ( ni l'envie...) de te former à la création de sites web... ) dans ce cas continue à "dupliquer" tes contenus html dans tes "sections" ... mais ne duplique pas le code Javascript !
Mais bon,
Si ton bouton doit être présent sur PC ET sur Tablette ..... place le dans une "section" qui ne sera pas masquée ( ni sur tablette , ni sur PC )..
Comme ça.. plus de soucis...
Et si vraiment tu veux continuer à bosser comme tu le fais ( je ne vais pas avoir le temps ( ni l'envie...) de te former à la création de sites web... ) dans ce cas continue à "dupliquer" tes contenus html dans tes "sections" ... mais ne duplique pas le code 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>