3 answers
Hello,
You forgot, in your reset, to set the variable count to zero.
But we can do it differently... just reset the innerHTML of the button to zero and use the following code to create your vote buttons
--
Best regards,
Jordane
You forgot, in your reset, to set the variable count to zero.
But we can do it differently... just reset the innerHTML of the button to zero and use the following code to create your vote buttons
<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> // we retrieve all buttons with the class js-btn-vote var buttons = document.getElementsByClassName('js-btn-vote'); // for each button, we handle the onclick for(let i=0; i<buttons.length;i++){ buttons[i].onclick = function(e){ this.innerHTML = parseInt(this.innerHTML) + 1; } } </script> </body> </html> --
Best regards,
Jordane
Merci, ça fonctionne, mais j'ai un autre souci : le bouton de réinitialisation ne fonctionne que pour un bouton.
J'ai inséré ce code dans une section pour PC seulement.
Le bouton de réinitialisation fonctionne bien.
Par contre, pour la section dédiée aux mobiles/tablettes,
le bouton de réinitialisation ne fonctionne pas. Voici le code
J'ai inséré 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 boutons ayant la classe 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 de réinitialisation fonctionne bien.
Par contre, pour la section dédiée aux mobiles/tablettes,
le bouton de réinitialisation 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 boutons ayant la classe 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>
I don't understand....
You told us you were going to have several buttons on the same page....
Now, you are talking about "sections" for PC and for mobiles/tablets .... what do you mean by "sections"??
Are the two codes you are showing us in the same file????
If so, why have you "duplicated" my JS code??? Do you know what "functions" are and how they work???
Do you understand the code I gave you??
Do you understand the code you tried to write?? (I doubt it, otherwise your reset would point to the correct id...)
Regarding your "sections".... don't tell me you are "duplicating" your HTML code to manage the case where you are on PC and the one where you are on mobile....
I invite you to learn about what responsive design is... and to help you, consider using a CSS framework like Bootstrap.
You told us you were going to have several buttons on the same page....
Now, you are talking about "sections" for PC and for mobiles/tablets .... what do you mean by "sections"??
Are the two codes you are showing us in the same file????
If so, why have you "duplicated" my JS code??? Do you know what "functions" are and how they work???
Do you understand the code I gave you??
Do you understand the code you tried to write?? (I doubt it, otherwise your reset would point to the correct id...)
Regarding your "sections".... don't tell me you are "duplicating" your HTML code to manage the case where you are on PC and the one where you are on mobile....
I invite you to learn about what responsive design is... and to help you, consider using a CSS framework like Bootstrap.
I'm using WordPress, specifically Elementor (which is a drag-and-drop page builder) to build my pages.
On a page, I can insert several elements, such as sections, titles, HTML code tags, buttons, etc.
For each element, I can choose whether I want to hide it on PC, mobile, etc.
As for the code, I don't fully understand it; I'm not good at JavaScript, and I haven't started learning yet because I want to finish my site first since I only need these counters.
Regarding the code, I've created two sections on the same page: the first for PCs and the second for mobile. Then, I hide the first section for mobile and tablet, and I hide the second for computers. Here's a video explaining what I'm doing.
https://www.youtube.com/watch?v=D0-km8-7bHM
The problem is that when I put the button in another section, it doesn't work.
On a page, I can insert several elements, such as sections, titles, HTML code tags, buttons, etc.
For each element, I can choose whether I want to hide it on PC, mobile, etc.
As for the code, I don't fully understand it; I'm not good at JavaScript, and I haven't started learning yet because I want to finish my site first since I only need these counters.
Regarding the code, I've created two sections on the same page: the first for PCs and the second for mobile. Then, I hide the first section for mobile and tablet, and I hide the second for computers. Here's a video explaining what I'm doing.
https://www.youtube.com/watch?v=D0-km8-7bHM
The problem is that when I put the button in another section, it doesn't work.
Ah la la la..... using tools without knowing how they actually work... it's not the best...
But well,
If your button needs to be present on both PC AND Tablet..... place it in a "section" that won't be hidden (neither on tablet nor on PC)..
This way... no more worries...
And if you really want to keep working the way you do (I won't have the time (nor the desire...) to train you in website creation...) then keep "duplicating" your html content in your "sections"... but do not duplicate the Javascript code!
But well,
If your button needs to be present on both PC AND Tablet..... place it in a "section" that won't be hidden (neither on tablet nor on PC)..
This way... no more worries...
And if you really want to keep working the way you do (I won't have the time (nor the desire...) to train you in website creation...) then keep "duplicating" your html content in your "sections"... but do not duplicate the Javascript code!
<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> // get all buttons with the class js-btn-vote var buttons = document.getElementsByClassName('js-btn-vote'); // for each button, manage the onclick for(let i=0; i<buttons.length;i++){ buttons[i].onclick = function(e){ this.innerHTML = parseInt(this.innerHTML) + 1; } } // reset function function reset(quoi){ document.getElementById('btn'+quoi).innerHTML = 0; } </script> </body> </html>