Help - Search - Members - Calendar
Full Version: Counter minimum
HTMLHelp Forums > Programming > Client-side Scripting
Osku
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
Christian J
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
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.