按钮在加载时自动点击一次,然后无法点击

时间:2014-01-17 23:53:50

标签: javascript jquery html button click

我正在尝试按下按钮使变量增加1,然后更新显示变量的页面计数器。出于某种原因,在页面加载时,按钮显然会单击一次,任何实际的点击都不会执行任何操作。

我已尝试$("#click").click(click(1));并将onClick="click(1)"放在按钮的实际HTML上,但两者似乎都输出相同的结果。

以下是相关的HTML:

<div class="column_middle"> 
    <div style="font-size:115%;display:inline;">Money: <span id="money">0</span></div>

    <button id="click" class="mainbutton" style="margin:10px;margin-right:5px;" title="">Click</button>

相关的javascript:

// Activated on DOM load
function onLoad( jQuery ) {
    // Set up button functions
    $("#click").click(click(1));
}

function click(amount) { // Player clicking
    money += amount; // Add the amount of clicks to the total money

    html_money.text(money); // Update page money value

    console.log("Clicked "+amount+" times.");
}

// Variable declaration
var money = 0; // Total money
var stock = 0; // Total stock
    var html_money = $("#money"); // Money variable on the actual page
    var html_stock = $("#stock"); // Stock variable on the actual page

2 个答案:

答案 0 :(得分:1)

至少这一行不起作用:$("#click").click(click(1));因为在click事件中,你将“执行”click函数的返回值(void),而不是函数本身。

试试这个:

<div class="column_middle">
    <div style="font-size:115%;display:inline;">Money: <span id="money">0</span></div>
    <button id="incrementButton" class="mainbutton" style="margin:10px;margin-right:5px;" title="">Click</button>
</div>

JS:

$(document).ready(function () {

  var increment = function (amount) {
    $('#money').text(
      parseInt($('#money').text(), 10) + amount
    );
  }  

  $('#incrementButton').click(function () {
    increment(1);
  });

  increment(1);

});

我还创造了一个小提琴:http://jsfiddle.net/cP6Lq/

答案 1 :(得分:0)

将您的代码更改为:

function incrementMoney(amount) { // Player clicking
    $("#money").html( parseInt($("#money").html()) + amount);
}

$(document).ready(function () {
    $("#click").click(function(){
        incrementMoney(1));
    });
}

如果您的元素ID就像函数一样命名,那么避免使用限定名称非常重要。