You see when I first click the button it adds 6 not five, and after that it just adds 1 every time. I don't know how to fix this because I don't know anything about javascript. And when it gets to 100¢ is it possible to make it $1 and then if you click it again it goes to $1.01 and then $1.02 and so on.
var number = 5
function plusOne(value) {
number++;
count.textContent = number.toString();
}#coin {
background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
border: none;
background-position: center;
background-repeat: no-repeat;
background-size: 200px 200px;
background-color: white;
width: 200px;
height: 200px;
}
#coin:active {
width: 190px;
height: 190px;
background-size: 190px 190px;
}<!DOCTYPE html>
<html>
<head>
<title>Coin Clicker</title>
</head>
</html>
<html>
<body>
<div>
<span id="count">0</span><span>¢</span>
</div>
<div>
<button id="coin" onclick="plusOne(value)" alt="coin"></button>
</div>
</body>
</html>Change var number to 1 if want to start from 1
And add this to function for increasing 5:
number = number + 5 ;
And add this to function for increasing 0.01:
numberChange = numberChange + 0.01 ;
to increase by 0.01 instead of number++ as it will increase 1 on each click.
You may ask why used number += 0.01 while above expression is different , well it is same as number= number + 0.01 .
It works like this :
var number = 1;
number = 1 + 0.01
number = 1.01
then number = number + 0.01
number = 1.01 + 0.01
number = 1.02
then so on .....
toFixed(2) is to show results up to 2 decimal places only because when adding decimal numbers there will be difference in each iteration so to remove that.
See this for .toFixed
var number = 90
var numberChange = 1
function plusOne(value) {
number += 5;
count.textContent = number.toString();
changeCurSign.innerHTML = "¢";
if (number > 99) {
numberChange += 0.01;
var reed = numberChange.toFixed(2)
count.textContent = reed.toString();
changeCurSign.innerHTML = "$";
}
}#coin {
background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
border: none;
background-position: center;
background-repeat: no-repeat;
background-size: 200px 200px;
background-color: white;
width: 200px;
height: 200px;
}
#coin:active {
width: 190px;
height: 190px;
background-size: 190px 190px;
}<!DOCTYPE html>
<html>
<head>
<title>Coin Clicker</title>
</head>
</html>
<html>
<body>
<div>
<span id="count">0</span><span id="changeCurSign">¢</span>
</div>
<div>
<button id="coin" onclick="plusOne(value)" alt="coin"></button>
</div>
</body>
</html>start the variable at "0" because when you click on the button, the script already adds +5 to the variable. Easier to change the value of the variable by using number = number + 5;
If you want an anser to your second question open a second question with it and show the attempt to solve the 2nd Question.
var number = 0;
function plusOne(value) {
number = number + 5;
count.textContent = number.toString();
}#coin {
background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
border: none;
background-position: center;
background-repeat: no-repeat;
background-size: 200px 200px;
background-color: white;
width: 200px;
height: 200px;
}
#coin:active {
width: 190px;
height: 190px;
background-size: 190px 190px;
}<!DOCTYPE html>
<html>
<head>
<title>Coin Clicker</title>
</head>
</html>
<html>
<body>
<div>
<span id="count">0</span><span>¢</span>
</div>
<div>
<button id="coin" onclick="plusOne(value)" alt="coin"></button>
</div>
</body>
</html>How to count five every time instead of one
number++ basically means number + 1. Just change the initial value of number to 0 and change number++ to number = number + 5 like this:
function plusOne(value) {
number += 5; // this is equivalent to "number = number + 5"
count.innerHTML = number.toString();
}
And when it gets to 100¢ is it possible to make it $1 and then if you click it again it goes to $1.01 and then $1.02 and so on.
Just add a second variable called say, dollar and use an if/else condition to add the dollar value along with the 0.01 addition instead once you reached 100¢ like this:
let number = 0;
let dollar = 1;
function plusOne() {
if(number < 95) {
number += 5; // this is equivalent to "number = number + 5"
count.innerHTML = number.toString() + '</span><span>¢</span>';
} else {
dollar += 0.01;
count.innerHTML = dollar.toFixed(2).toString() + '</span><span>$</span>';
}
}
Check and run the following code snippet for a practical example of the above code:
let number = 0;
let dollar = 1;
function plusOne() {
if(number < 95) {
number += 5; // this is equivalent to "number = number + 5"
count.innerHTML = number.toString() + '</span><span>¢</span>';
} else if(number < 100) {
number += 5; // add 5 to number but start inserting the "dollar" value to html now
count.innerHTML = dollar.toString() + '</span><span>$</span>';
} else {
dollar += 0.01;
count.innerHTML = dollar.toFixed(2).toString() + '</span><span>$</span>';
}
}
document.querySelector('#coin').addEventListener('click', plusOne);#coin {
background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
border: none;
background-position: center;
background-repeat: no-repeat;
background-size: 200px 200px;
background-color: white;
width: 200px;
height: 200px;
}
#coin:active {
width: 190px;
height: 190px;
background-size: 190px 190px;
}<div>
<span id="count">0</span>
</div>
<div>
<button id="coin" alt="coin"></button>
</div>