I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic.
Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked?
I have successfully implemented this in a basic JavaScript game, but I'm having trouble integrating it into Ionic. Since it's within a tab screen, do I need to write the JavaScript differently?
The code below includes jQuery, which may not be easily supported by Ionic.
If someone can assist me, all I need is a way to store a variable (likely using localforage), display the variable (using a span element), and increase the value of the variable when a button is tapped or clicked.
Thank you so much! I've been struggling with this for two days now and still no luck...
It's challenging to provide all my Ionic code as it spans across more than just three files...
var coffee = localStorage.getItem("coffee") ? localStorage.getItem("coffee") : 0.0;
var totalCoffee = localStorage.getItem("totalCoffee") ? localStorage.getItem("totalCoffee") : 0.0;
var cookRate = localStorage.getItem("cookRate") ? localStorage.getItem("cookRate") : 1.0;
function prettify(input){
var output = Math.round(input * 1000000)/1000000;
return output;
}
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone();
var img = $("#myImg").clone();
$("body").append(obj);
$("body").append(img);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.css('z-index', '2');
img.css('position','absolute');
img.show();
obj.offset({left: e.pageX-10, top: e.pageY-80});
img.offset({left: e.pageX-10, top: e.pageY-50});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
img.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});#coffeeButton{
cursor: pointer; cursor: hand; background: #5EFF8F; border-radius: 7px; margin: 5px; padding: 20px; font: bold 30px Tahoma; text-align: left;
-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -user-select: none;
}
#clone{
font-size: 1.5em;
font-weight: bold;
color: white;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-user-select: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img title = "" id="myImg" src="images/cup.png" style="display:none" width="20" height="30">
<div id="clone"></div>
<div id = "coffeeButton">Make Coffee <br /><span id = "cookRate">1</span> Per Click</div>
Coffee = <span id = "coffee">0.0</span>