calling a javascript function with a button

Question

I have been bashing my face against a keyboard trying to work out why my javascript code doesnt work inside of ionic.

can someone please tell me the way to store a number inside of a variable, display that variable and increase that variable when you click a button..

I have this working no problems on a basic javascript game, but i am trying to incorporate it into ionic.. It is inside of a tab screen does that mean i have to write the javascript different?

the below code includes jquery and I don't think ionic will support that easily.

But if someone could help me, I just need a way to store a variable (most likely with localforage) and a way to display the variable (span?) and a way to increase taht variable with a click of a button? (with on-tap or onclick?)

Thanks heaps I have been bashing my face against the keyboard for 2 days now and it does not work...

It's a bit harder to link all my ionic code as it's over much more than just 3 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>

Answer 1

Try this, make sure jQuery is loaded before angular.js, and change all of your code from like this $('#coffeeButton') to like this angular.element('#coffeeButton') apparently, when used with angular.js the $ gets replaced with angular.element see http://forum.ionicframework.com/t/use-ionic-with-jquery/1120/8

You may need to put <script src="jquery.js"></script> above <script type="text/javascript" src="js/app.js"></script> in your html file.

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;
}

angular.element('#coffeeButton').click(function(e) {

    var obj = angular.element('#clone').clone(); 
    var img = angular.element('#myImg').clone(); 

    angular.element('body').append(obj);
    angular.element('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() {
        angular.element(this).remove();
    }); 
    img.animate({"top": "-=80px"}, 1000, "linear", function() {
        angular.element(this).remove();
    });

});