How to make JavaScript basic shopping cart amount calculator

How to make JavaScript basic shopping cart amount calculator - javascript

<script>
var itemquantity, appleamount, appletotalamount, bananaamount, bananatotalamount, gtotalfruits, gtotalfruitss
function apple() {
var itemquantity = document.getElementById("apple");
var appleamount = document.getElementById("appletotal");
var appletotalamount = itemquantity.value * 50;
appleamount.value = appletotalamount;
}
function banana() {
var itemquantity = document.getElementById("banana");
var bananaamount = document.getElementById("bananatotal");
var bananatotalamount = itemquantity.value * 30;
bananaamount.value = bananatotalamount;
}
function grandtotalfruits() {
var gtotalfruits = document.getElementById("grandtotalfruitss");
var gtotalfruitss = appletotalamount + bananatotalamount;
gtotalfruits.value = gtotalfruitss;
}
</script>
<div class="left">
<p class="fruit11">Apples - <input type="number" id="apple" class="shoppinginput" onChange="apple()" onchange="grandtotalfruits"> Rs.50/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="appletotal"></output></p>
</div>
<div class="left">
<p class="fruit11">Bananas - <input type="number" id="banana" class="shoppinginput" onChange="banana()" onchange="grandtotalfruits"> Rs.30/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="bananatotal"></output></p>
</div>
<div class="grandtotal">
<p class="fruit13">Grand total = Rs.<output id="grandtotalfruitss"></output></p>
</div>`
Take first input type="number" value1 * 100 show in output box and then take input type="number" value2 * 100 show in second output box, then add the value1 and value2 and show in output box 3. I am using JavaScript and am a beginner.
Can you see the design while reading the question?
It's working for output1 and output2, but not able create correct method or function for the grand total output of output1 and output2 in the third output box.

Basically, what #dev8989 said. Every time the user changes the "apples" value, you change the "apples quantity" (same for the "bananas"). You also have to update the "grand total" if any of the apples/bananas are updated. That's what #dev8989 suggested:
var $apples = document.getElementById('apples')
var $applesTotal = document.getElementById('apples-total')
var $bananas = document.getElementById('bananas')
var $bananasTotal = document.getElementById('bananas-total')
var $grandTotal = document.getElementById('grand-total')
function apple (v) { return 50 * v }
function banana (v) { return 30 * v}
$apples.addEventListener('change', function() {
$applesTotal.textContent = apple($apples.value)
$grandTotal.textContent = apple($apples.value) + banana($bananas.value)
})
$bananas.addEventListener('change', function() {
$bananasTotal.textContent = banana($bananas.value)
$grandTotal.textContent = apple($apples.value) + banana($bananas.value)
})
<input type="number" id="apples">
<p>Apples total: <span id="apples-total">0</span></p>
<input type="number" id="bananas">
<p>Bananas total: <span id="bananas-total">0</span></p>
<p>Grand total: <span id="grand-total">0</span></p>
Edit: here's the original code with the bugs fixed. See my comment on why this was necessary:
var itemquantity, appleamount, appletotalamount = 0, bananaamount, bananatotalamount = 0, gtotalfruits, gtotalfruitss
function apple() {
var itemquantity = document.getElementById("apple");
var appleamount = document.getElementById("appletotal");
appletotalamount = itemquantity.value * 50;
appleamount.value = appletotalamount;
grandtotalfruits();
}
function banana() {
var itemquantity = document.getElementById("banana");
var bananaamount = document.getElementById("bananatotal");
bananatotalamount = itemquantity.value * 30;
bananaamount.value = bananatotalamount;
grandtotalfruits();
}
function grandtotalfruits() {
var gtotalfruits = document.getElementById("grandtotalfruitss");
var gtotalfruitss = appletotalamount + bananatotalamount;
gtotalfruits.value = gtotalfruitss;
}
<div class="left">
<p class="fruit11">Apples - <input type="number" id="apple" class="shoppinginput" onChange="apple()" onchange="grandtotalfruits"> Rs.50/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="appletotal"></output></p>
</div>
<div class="left">
<p class="fruit11">Bananas - <input type="number" id="banana" class="shoppinginput" onChange="banana()" onchange="grandtotalfruits"> Rs.30/Kg</p>
<p class="fruit12">Total amount = Rs.<output id="bananatotal"></output></p>
</div>
<div class="grandtotal">
<p class="fruit13">Grand total = Rs.<output id="grandtotalfruitss"></output></p>

Add the grandtotalfruit() in the apple() and banana() functions.
function apple() {
var itemquantity = document.getElementById("apple");
var appleamount = document.getElementById("appletotal");
var appletotalamount = itemquantity.value * 50;
appleamount.value = appletotalamount;
grandtotalfruit();
}
function banana() {
var itemquantity = document.getElementById("banana");
var bananaamount = document.getElementById("bananatotal");
var bananatotalamount = itemquantity.value * 30;
bananaamount.value = bananatotalamount;
grandtotalfruit();
}

Related

Manipulation of div elements with javascript

Can someone explain to me or figure it out. I dont know where I made a mistake here. I have javascript and html code where I get input from user for a flight. I want to make a counter to count all flights function counter() but it gives me the value of name. And another problem is I want when I click on the Accept button to make the background of the div element green function changeColor().
function addRow(){
var name = document.getElementById("name");
var plainNum = document.getElementById("plainNum");
var coordinates = document.getElementById("coordinates");
var radius = document.getElementById("radius");
var altitude = document.getElementById("altitude");
var type = document.getElementById("type");
if(!name.value || !plainNum.value || !coordinates.value || !radius.value || !altitude.value || !type.value){
alert("Enter all values");
return;
}
var output = document.getElementById("output");
var divForOutput = document.createElement("DIV");
var btn1 = document.createElement("BUTTON");
var btn2 = document.createElement("BUTTON");
var t1 = document.createTextNode("Accept");
var t2 = document.createTextNode("Reject");
btn1.appendChild(t1);
btn2.appendChild(t2);
divForOutput.innerHTML += name.value +", " + plainNum.value +"<br>" + "Radius: " + radius.value +", "+"Altitude: "+altitude.value+"<br>"+type.value+"<br>";
divForOutput.appendChild(btn1);
divForOutput.appendChild(btn2);
divForOutput.setAttribute('class','printing');
output.appendChild(divForOutput);
btn1.setAttribute('onclick','changeColor(this);');
btn2.setAttribute('onclick','disableButtons()');
// name.value = "";
// plainNum.value = "";
// coordinates.value = "";
// radius.value = "";
// altitude.value = "";
counter();
}
function disableButtons(){}
function changeColor(){
var parentofChild = document.getElementById("output");
output.div.background = green;
}
function counter(){;
var sum = document.getElementsByClassName("printing");
var counter = 0;
for(var i = 0;i <sum.length;i++){
counter+=parseInt(sum[i].innerHTML);
}
document.getElementById("total").innerHTML = counter;
}
<h1>Register flight</h1>
<form>
<div>
<label>Name and surname</label>
<input type="text" id="name">
</div>
<div>
<label>Number plate</label>
<input type="text" id="plainNum">
</div>
<div>
<label>Coordinates</label>
<input type="text" id="coordinates">
</div>
<div>
<label>Radius</label>
<input type="text" id="radius">
</div>
<div>
<label>Altitude</label>
<input type="text" id="altitude">
</div>
<div>
<label>Type</label>
<select id="type">
<option value="Comercial">Comercial</option>
<option value="Buissines">Buissines</option>
</select>
</div>
<div>
<input type="button" value="Submit" onclick="addRow();">
</div>
</form>
<divи>
<h3>Registered flights</h3>
<p>Total:<span id="total">0</span></p>
</div>
<div id="output">
</div>

Below I've fixed some of the code and made things a bit better.
function addRow(){
var name = document.getElementById("name");
var plainNum = document.getElementById("plainNum");
var coordinates = document.getElementById("coordinates");
var radius = document.getElementById("radius");
var altitude = document.getElementById("altitude");
var type = document.getElementById("type");
if(!name.value || !plainNum.value || !coordinates.value || !radius.value || !altitude.value || !type.value){
alert("Enter all values");
return;
}
var output = document.getElementById("output");
var divForOutput = document.createElement("DIV");
//var btn1 = document.createElement("BUTTON");
//var btn2 = document.createElement("BUTTON");
//var t1 = document.createTextNode("Accept");
//var t2 = document.createTextNode("Reject");
//btn1.appendChild(t1);
//btn2.appendChild(t2);
divForOutput.innerHTML = `
${name.value}<br>
Radius: ${radius.value}<br>
Altitude: ${altitude.value}<br>
${type.value}<br>
<button onclick="changeColor();">Accept</button>
<button onclick="disableButtons();">Reject</button>
`;
divForOutput.appendChild(btn1);
divForOutput.appendChild(btn2);
divForOutput.setAttribute('class','printing');
output.appendChild(divForOutput);
//btn1.setAttribute('onclick','changeColor(this);');
//btn2.setAttribute('onclick','disableButtons()');
// name.value = "";
// plainNum.value = "";
// coordinates.value = "";
// radius.value = "";
// altitude.value = "";
counter();
}
function disableButtons(){}
function changeColor(){
const output = document.getElementById("output");
output.style.backgroundColor = "green";
}
function counter(){;
const sum = document.getElementsByClassName("printing");
const counter = sum.getElementsByTagName('div').length;
return document.getElementById("total").innerHTML = counter;
}
There is an explanation for the background color here
As for the counter; what I did was count the div elements inside of the output div. That will give you the amount of flights a user has.

Your color setting had several problems. You don't use output.div.background to set the color, and you were using the undefined variable green instead of the string "green". This works:
function changeColor(){
var output = document.getElementById("output");
output.style.backgroundColor = 'green';
}
I don't know what you are trying to count with your counter function, so I can't fix that.

How to make Feedback disappear with user action in Javascript?

What do I need to add to the code, so that when the user clicks the button New or starts typing in the inputfield "userAnswer" for a second try, the Feedback disappears.
But the feedback should always appear when user clicks check
This is the simplified version of the code:
function F1() {
Z1 = document.getElementById("Z1");
Z2 = document.getElementById("Z2");
rZ1 = Math.floor((Math.random() * 10));
rZ2 = Math.floor((Math.random() * 10));
Z1.innerHTML = rZ1;
Z2.innerHTML = rZ2;
var operators1 = ['+', '-'];
oper1 = document.getElementById("operator1");
op1 = operators1[Math.floor(Math.random() * 2)];
oper1.innerHTML = op1;
rnd = parseFloat(eval(rZ1 + op1 + rZ2));
answer.innerHTML = rnd;
}
function F2() {
antw = parseFloat(document.getElementById("userAnswer").value);
feedBack = document.getElementById("feedBack");
ant = document.getElementById("answer").textContent;
{
if (antw == ant) {
feedBack.textContent = "good";
} else {
feedBack.textContent = "bad";
}
}
};
<button onclick="F1()"> New </button>
<label id="Z1"> </label>
<label id="operator1"> </label>
<label id="Z2"> </label>
= <input id="userAnswer" type=text>
<button onclick="F2()">check</button>
<p id="feedBack"> </p>
<p> <label id="answer"></label> </p>

I added a function at the end of the code to disappear with feedBack and a line was added in F1 and F2 to display and disappear with feedBack (I added a comment on those lines)
function F1() {
Z1 = document.getElementById("Z1");
Z2 = document.getElementById("Z2");
rZ1 = Math.floor((Math.random() * 10));
rZ2 = Math.floor((Math.random() * 10));
Z1.innerHTML = rZ1;
Z2.innerHTML = rZ2;
var operators1 = ['+', '-'];
oper1 = document.getElementById("operator1");
op1 = operators1[Math.floor(Math.random() * 2)];
oper1.innerHTML = op1;
rnd = parseFloat(eval(rZ1 + op1 + rZ2));
answer.innerHTML = rnd;
document.querySelector('p#feedBack').style.display = 'none' // add this
document.querySelector('#userAnswer').value = ''
}
function F2() {
antw = parseFloat(document.getElementById("userAnswer").value);
feedBack = document.getElementById("feedBack");
ant = document.getElementById("answer").textContent;
{
if (antw == ant) {
feedBack.textContent = "good";
} else {
feedBack.textContent = "bad";
}
}
document.querySelector('p#feedBack').style.display = 'block' // add this
};
document.querySelector('#userAnswer').addEventListener('keydown', event => {
if(document.querySelector('p#feedBack').style.display == 'block')
document.querySelector('p#feedBack').style.display = 'none'
})
<button onclick="F1()"> New </button>
<label id="Z1"> </label>
<label id="operator1"> </label>
<label id="Z2"> </label>
= <input id="userAnswer" type="text" >
<button onclick="F2()">check</button>
<p id="feedBack"></p>
<p> <label id="answer"></label> </p>

Add to the F1-function
document.getElementById('feedBack').classList.add('hidden');
and to the CSS a new entry for the hidden class to hide the element if exists.
For displaying the feedback if check is pressed remove similar in F2 this class.
document.getElementById('feedBack').classList.remove('hidden');
function F1() {
Z1 = document.getElementById("Z1");
Z2 = document.getElementById("Z2");
rZ1 = Math.floor((Math.random() * 10));
rZ2 = Math.floor((Math.random() * 10));
Z1.innerHTML = rZ1;
Z2.innerHTML = rZ2;
var operators1 = ['+', '-'];
oper1 = document.getElementById("operator1");
op1 = operators1[Math.floor(Math.random() * 2)];
oper1.innerHTML = op1;
rnd = parseFloat(eval(rZ1 + op1 + rZ2));
answer.innerHTML = rnd;
document.getElementById('feedBack').classList.add('hidden');
}
function F2() {
antw = parseFloat(document.getElementById("userAnswer").value);
feedBack = document.getElementById("feedBack");
ant = document.getElementById("answer").textContent;
{
if (antw == ant) {
feedBack.textContent = "good";
} else {
feedBack.textContent = "bad";
}
}
document.getElementById('feedBack').classList.remove('hidden');
};
.hidden { visibility: hidden; }
<button onclick="F1()"> New </button>
<label id="Z1"> </label>
<label id="operator1"> </label>
<label id="Z2"> </label>
= <input id="userAnswer" type=text>
<button onclick="F2()">check</button>
<p id="feedBack"> </p>
<p> <label id="answer"></label> </p>

Counting different input values, add them and show result

I want to make a "drink counter". There are 3 inputs which add another drink onclick. Every drink has a specific value in alcohol (var bier, var wein, var soju).
So on every count up (click), the script is supposed to:
count up the value in the respective input [this works]
add up all the numbers and drinks multiplied by their alcohol value, so added_up = bier_full + soju_full + wein_full;
If you look at the code, you will notice that I'm quite the noob. Help would be much appreciated. I can't think of a way to add all the drinks*alc. values up and display them in the id="status".
HTML:
var full = 100;
var bier = 12.7;
var wein = 10;
var soju = 3.5;
status = document.getElementById("status");
var bier_c = parseInt(document.getElementById("beer").value);
var soju_c = parseInt(document.getElementById("soju").value);
var wein_c = parseInt(document.getElementById("wine").value);
var bier_i = document.getElementById("bier_info");
var soju_i = document.getElementById("soju_info");
var wein_i = document.getElementById("wein_info");
function reset() {
bier_c = 0;
soju_c = 0;
wein_c = 0;
document.getElementById("beer").value = "0";
document.getElementById("soju").value = "0";
document.getElementById("wine").value = "0";
};
function bier_s() {
bier_c++;
document.getElementById("beer").value = bier_c;
bier_full = bier_c * bier;
bier_i.innerHTML = bier_full;
return bier_full;
};
function soju_s() {
soju_c++;
document.getElementById("soju").value = soju_c;
soju_full = soju_c * soju;
soju_i.innerHTML = soju_full;
return soju_full;
};
function wein_s() {
wein_c++;
document.getElementById("wine").value = wein_c;
wein_full = wein_c * wein;
wein_i.innerHTML = wein_full;
return wein_full;
};
added_up = bier_full + soju_full + wein_full;
alert(added_up);
<label>Beer</label><input id="beer" type="button" style="width: 50px;" onclick="bier_s();" value="0">
<label>Soju</label><input id="soju" type="button" style="width: 50px;" onclick="soju_s();" value="0">
<label>Wine</label><input id="wine" type="button" style="width: 50px;" onclick="wein_s();" value="0">
<br/>
<h2 class="c_red" id="status">Let's go!</h2>
<div class="am_info">
<p>Bier: <span id="bier_info"></span></p>
<p>Soju: <span id="soju_info"></span></p>
<p>Wine: <span id="wein_info"></span></p>
</div>

just add a method that runs every time the other methods runs =D
var full = 100;
var bier = 12.7;
var wein = 10;
var soju = 3.5;
var bier_full = 0, soju_full = 0, wein_full = 0;
status = document.getElementById("status");
var bier_c = parseInt(document.getElementById("beer").value);
var soju_c = parseInt(document.getElementById("soju").value);
var wein_c = parseInt(document.getElementById("wine").value);
var bier_i = document.getElementById("bier_info");
var soju_i = document.getElementById("soju_info");
var wein_i = document.getElementById("wein_info");
function reset() {
bier_c = 0;
soju_c = 0;
wein_c = 0;
document.getElementById("beer").value = "0";
document.getElementById("soju").value = "0";
document.getElementById("wine").value = "0";
};
function bier_s() {
bier_c++;
document.getElementById("beer").value = bier_c;
bier_full = bier_c * bier;
bier_i.innerHTML = bier_full;
addUp()
return bier_full;
};
function soju_s() {
soju_c++;
document.getElementById("soju").value = soju_c;
soju_full = soju_c * soju;
soju_i.innerHTML = soju_full;
addUp()
return soju_full;
};
function wein_s() {
wein_c++;
document.getElementById("wine").value = wein_c;
wein_full = wein_c * wein;
wein_i.innerHTML = wein_full;
addUp()
return wein_full;
};
function addUp(){
added_up = bier_full + soju_full + wein_full;
alert(added_up);
}
<label>Beer</label><input id="beer" type="button" style="width: 50px;" onclick="bier_s();" value="0">
<label>Soju</label><input id="soju" type="button" style="width: 50px;" onclick="soju_s();" value="0">
<label>Wine</label><input id="wine" type="button" style="width: 50px;" onclick="wein_s();" value="0">
<br/>
<h2 class="c_red" id="status">Let's go!</h2>
<div class="am_info">
<p>Bier: <span id="bier_info"></span></p>
<p>Soju: <span id="soju_info"></span></p>
<p>Wine: <span id="wein_info"></span></p>
</div>

when checkbox is checked it calculate the price but the issue it not appear in confirm

function fuelPrice()
{
var fuelPrice=0;
var theForm = document.forms["price"];
var withFuelPrice = document.getElementsByClassName("ful");
if(withFuelPrice.checked==true)
{
fuelPrice=30;
}
return fuelPrice;
}
function withPol()
{
var polishPrice=0;
var theForm = document.forms["price"];
var includeInscription = document.getElementsByClassName("pol");
if(includeInscription.checked==true){
polishPrice=50;
}
return polishPrice;
}
function driver()
{
var driverPrice=0;
var theForm = document.forms["price"];
var getDriv = document.getElementsByClassName("drv");
if(getDriv.checked==true){
driverPrice=50;
}
return driverPrice;
}
function calculateTotal()
{
var car1= 50
var total = fuelPrice() + withPol() + car1 + driver();
var text = "Total Price For the Renting "+total+ "BHD/Week";
//display the result
var divobj = document.getElementsByClassName('totalPrice');
divobj.style.display='block';
divobj.innerHTML = text;
return text;
}
function myFunction()
{
var name = calculateTotal()
confirm(name)
}
<form class="price"><p class="totalPrice booktxt">Total Price For the Renting 50BHD/Week<br> </p>
<input onclick="calculateTotal() " type="checkbox" class="ful">With Fuel<br>
<input onclick="calculateTotal() " type="checkbox" class="pol">Polishing 2 weeks<br>
<input onclick="calculateTotal() " type="checkbox" class="drv">Driver<br>
</form>
<button class="btn1" onclick="myFunction()">Add to cart</button>
I am having some issues to make the price appear in confirm so the user sees the price and confirm its ok or not when i click it show a blank popup. Also, can I know my mistake to avoid it in the future

You have to return something to show in that confirm box.
function fuelPrice() {
var fuelPrice = 0;
var theForm = document.forms["price"];
var withFuelPrice = theForm.elements["ful"];
if (withFuelPrice.checked == true) {
fuelPrice = 30;
}
return fuelPrice;
}
function withPol() {
var polishPrice = 0;
var theForm = document.forms["price"];
var includeInscription = theForm.elements["pol"];
if (includeInscription.checked == true) {
polishPrice = 50;
}
return polishPrice;
}
function driver() {
var driverPrice = 0;
var theForm = document.forms["price"];
var getDriv = theForm.elements["drv"];
if (getDriv.checked == true) {
driverPrice = 50;
}
return driverPrice;
}
function calculateTotal() {
var car1 = 50
var total = fuelPrice() + withPol() + car1 + driver();
var text = "Total Price For the Renting " + total + "BHD/Week"; // Store text in local variable
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = text;
return text; // Return text
}
function myFunction() {
var name = calculateTotal()
confirm(name) // Now it shows text from calculateTotal function
}
<form id="price">
<p id="totalPrice" class="booktxt">Total Price For the Renting 50BHD/Week<br> </p>
<input onclick="calculateTotal() " type="checkbox" id="ful">With Fuel<br>
<input onclick="calculateTotal() " type="checkbox" id="pol">Polishing 2 weeks<br>
<input onclick="calculateTotal() " type="checkbox" id="drv">Driver<br>
</form>
<button class="btn1" onclick="myFunction()">Add to cart</button>

Just add a return value to calculateTotal function. Like the following
return divobj.innerHTML;
Full function looks as follows:
function calculateTotal()
{
var car1= 50
var total = fuelPrice() + withPol() + car1 + driver();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Renting "+total+ "BHD/Week";
return divobj.innerHTML;
}

How to properly use variables and Math.round

So i have this javascript that updates a paragraph, but it only outputs NaN. When i check the var coins it outputs ? before i click the button, i and if i push the button in the HTML it adds 0.01 every time i click it, and then my output ends up like this ?0.010.010.010.01.01... Any idea why this happens?
var Cpc = 0.01; //Coins per Click
var coins = 0; //Coins
var cps = 0; //Coins per Sec
setInterval(update, 10);
function update() {
var coinsFix = Number(Math.round(coins + 'e2') + 'e-2');
document.getElementById('Coins').innerHTML = coinsFix + ' $';
document.getElementById('CoinsB').innerHTML = coinsFix;
document.getElementById('Cps').innerHTML = cps + ' Cps';
}
function CPC() {
function cpc() {
var addCoins = coins + Cpc;
return addCoins;
}
coins = cpc();
}
<div class="rightBox">
<div id="ClickSpot">
<button id="clickButton" onClick="CPC()"> <img src="ClickerCoin.png" alt="ClickerSpot" class="ClickerSpot"> </button>
</div>
</div>
<div class="bottomBox">
<p id="Coins">Coins</p>
<div id="CoinsB" style="display: none"></div>
<p id="Cps">Cps</p>
</div>

You could use Number.toFixed with two digits. The result is a string.
The toFixed() method formats a number using fixed-point notation.
var coinsFix = coins.toFixed(2);
// ^^^^^^^^^^^
var Cpc = 0.01; //Coins per Click
var coins = 0; //Coins
var cps = 0; //Coins per Sec
setInterval(update, 10);
function update() {
var coinsFix = coins.toFixed(2);
document.getElementById('Coins').innerHTML = coinsFix + ' $';
document.getElementById('CoinsB').innerHTML = coinsFix;
document.getElementById('Cps').innerHTML = cps + ' Cps';
}
function CPC() {
function cpc() {
var addCoins = coins + Cpc;
return addCoins;
}
coins = cpc();
}
<div class="rightBox">
<div id="ClickSpot">
<button id="clickButton" onClick="CPC()"> <img src="ClickerCoin.png" alt="ClickerSpot" class="ClickerSpot"> </button>
</div>
</div>
<div class="bottomBox">
<p id="Coins">Coins</p>
<div id="CoinsB" style="display: none"></div>
<p id="Cps">Cps</p>
</div>

Change
setInterval(update, 10);
to
setInterval("update()", 10);
also
var coinsFix = Number(Math.round(coins + 'e2') + 'e-2');
to
var coinsFix = coins.toFixed(2);
Try this:
var Cpc = 0.01; //Coins per Click
var coins = 0; //Coins
var cps = 0; //Coins per Sec
setInterval("update()", 10);
function update() {
var coinsFix = coins.toFixed(2);
document.getElementById('Coins').innerHTML = coinsFix + ' $';
document.getElementById('CoinsB').innerHTML = coinsFix;
document.getElementById('Cps').innerHTML = cps + ' Cps';
}
function CPC() {
function cpc() {
var addCoins = coins + Cpc;
return addCoins;
}
coins = cpc();
}
<div class="rightBox">
<div id="ClickSpot">
<button id="clickButton" onClick="CPC()"> <img src="ClickerCoin.png" alt="ClickerSpot" class="ClickerSpot"> </button>
</div>
</div>
<div class="bottomBox">
<p id="Coins">Coins</p>
<div id="CoinsB" style="display: none"></div>
<p id="Cps">Cps</p>enter code here
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to make JavaScript basic shopping cart amount calculator - javascript

Related

Manipulation of div elements with javascript

How to make Feedback disappear with user action in Javascript?

Counting different input values, add them and show result

when checkbox is checked it calculate the price but the issue it not appear in confirm

How to properly use variables and Math.round

Categories

Resources