The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Counter minimum, new in the html and all other code
Osku
post 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 laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 3 2020, 03:49 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
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).



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Osku
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:36 AM