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>

That "button" isn't a button, it's a <div> (and therefore not keyboard accessible). Replace it with a real <button> to fix the issue. w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html — danielnixon
– danielnixon, Commented Jan 10, 2015 at 10:23
This actually works fine. It's because this is in a snippet it has a security problem on SO. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jan 10, 2015 at 10:25
@danielnixon No that's not true, it's perfectly valid to add a click event to a div. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jan 10, 2015 at 10:27
SOrry i should mention i need a javascript only way to do this... Also i have rewritten it 10 different ways and yet it still doesn't work in ionic. — MIke
– MIke, Commented Jan 10, 2015 at 10:27

Wesley Smith · Accepted Answer · 2015-01-10 11:04:40Z

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

});

edited Jan 10, 2015 at 11:04

answered Jan 10, 2015 at 10:56

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

MIke Over a year ago

Thanks, I tried your code but now my porject doesn't even display... unsure why, the angular i need to load is just ionic-angular.js right?

Wesley Smith Over a year ago

Yeah, is ionic-angular.js loaded after jQuery?

MIke Over a year ago

yeah tried that still doesn't work with jquery.. also tried the above code and it doesnt work either...

MIke Over a year ago

It must be something to do with ionic.. it's hard to explain unless your familiar with it.. basically inside the WWW folder, if i place all the files from my original game inside it it works fine. but obviously isn't optimised for an android and doesn't display properly.. soon as i try using the same code inside of tab-main.html it doesn't work.

MIke Over a year ago

OMFG. i had to link the frigging file in index.html not tab-main.html!!! it works now at least in some form it works, at least now i can start reqriting it all... you have no idea ho long i have been bashing my head for... because the tab i am working in is loaded from index.html even though my page is being displayed from tab-main.html i needed to link jquery in index.html thanks!

|

Collectives™ on Stack Overflow

calling a javascript function with a button

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related