Posted by: Osku Mar 3 2020, 02:23 PM
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
Posted by: Christian J Mar 3 2020, 03:49 PM
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).
Posted by: Osku Mar 4 2020, 09:52 AM
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.