使用按钮调用 JavaScript 函数

calling a javascript function with a button

本文关键字：JavaScript 函数 调用 按钮      更新时间：2023-09-26

我一直在用脸撞键盘，试图弄清楚为什么我的javascript代码在ionic中不起作用。

有人可以告诉我如何在变量中存储数字，显示该变量并在单击按钮时增加该变量。

我在基本的javascript游戏中没有问题，但我正在尝试将其合并到ionic中。它在选项卡屏幕内，这是否意味着我必须以不同的方式编写 javascript？

下面的代码包括jquery，我认为Ionic不会轻易支持它。

但是，如果有人可以帮助我，我只需要一种存储变量的方法（最有可能是 localforage）和一种显示变量的方法（span？）以及一种通过单击按钮来增加该变量的方法？（点击或点击

？

谢谢你，我已经把脸撞在键盘上 2 天了，它不起作用......

链接我所有的离子代码有点困难，因为它不仅仅是 3 个文件......

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>

试试这个，确保在 angular.js 之前加载 jQuery，并将所有代码从这样$('#coffeeButton')更改为像这样 angular.element('#coffeeButton') 显然，当与 angular 一起使用时.js $被替换为angular.element请参阅 http://forum.ionicframework.com/t/use-ionic-with-jquery/1120/8

您可能需要在 html 文件中<script type="text/javascript" src="js/app.js"></script>上面放置<script src="jquery.js"></script>。

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();
    });
});
相关文章：