Counter minimum, new in the html and all other code |
Counter minimum, new in the html and all other code |
Osku |
Mar 3 2020, 02:23 PM
Post
#1
|
Group: Members Posts: 3 Joined: 3-March 20 Member No.: 27,217 |
Hello! I am new to all code and studying some beginner course atm.
So, I want to add a strip of code that doesn't allow negative values in the printed out text. Here is what I have so far. <html> <head> <center> <meta charset="utf-8"/> <title>Pressavaali laskuri</title> Äänilaskuri <br> <br> <nav> </head> <body> <button type="button" onclick="lisaa();"> lisää äänen </button> click to vote <!the first button increases the the total value.> <br> <button type="button" onclick="vahenna();"> vähentää äänen </button> click to veto <!the second button decreases the the total value.> <h1 id="laskuri1"> 0 </h1> <script> var clicks = 0; function lisaa(){ clicks++; document.getElementById("laskuri1").innerHTML = clicks; //// +1 votes } function vahenna(){ clicks-- document.getElementById("laskuri1").innerHTML = clicks; //// -1 votes } </script> </body> </center> </html> I'd appreciate any help, I am kinda lost here, couldn't find this info, due the lack of knowledge in search words |
Christian J |
Mar 3 2020, 03:49 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Here's one idea:
CODE <button type="button" onclick="lisaa();"> lisää äänen </button> click to vote <br> <button type="button" id="vahenna" disabled="disabled" onclick="vahenna(this);"> vähentää äänen </button> click to veto <h1 id="laskuri1"> 0 </h1> <script> var clicks = 0; function lisaa(){ clicks++; document.getElementById("laskuri1").innerHTML = clicks; // +1 votes // make disabled veto button clickable again: document.getElementById('vahenna').removeAttribute('disabled'); } function vahenna(){ if(clicks>0) { clicks--; document.getElementById("laskuri1").innerHTML = clicks; // -1 votes } // make vahenna button disabled when laskuri1 is at zero: if(clicks<1) { document.getElementById('vahenna').setAttribute('disabled', 'disabled'); } } </script> Here's a more detailed explanation of the above. When clicking the Veto button, the IF condition checks that the current value is larger than zero before decreasing it: CODE if(clicks>0) { clicks--; document.getElementById("laskuri1").innerHTML = clicks; //// -1 votes } (if it's not larger than zero, nothing happens). Disabling and re-enabling the Veto button is not not strictly necessary, but maybe it can be used as a hint to the user. Here's when the page is first loaded: CODE <button type="button" id="vahenna" disabled="disabled" onclick="vahenna(this);"> vähentää äänen </button> click to veto ...and here's when the value is changed to zero: CODE if(clicks<1) { document.getElementById('vahenna').setAttribute('disabled', 'disabled'); } When the user increases the value to at least 1, the Veto button is made clickable again: CODE document.getElementById('vahenna').removeAttribute('disabled'); As a sidenote, a proper HTML comment should look like this: CODE <!--the first button increases the the total value--> (though I don't remember what the hyphen characters actually do in it), and a javascript one-line comment only needs two slashes: CODE // +1 votes (though I don't think the extra slashes hurt anything). |
Osku |
Mar 4 2020, 09:52 AM
Post
#3
|
Group: Members Posts: 3 Joined: 3-March 20 Member No.: 27,217 |
Thank you Christian for tips and help. I am going to try these ideas! Also I am glad that you pointed out these unnecessary extra characters.
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:36 PM |