我不能让这个 JavaScript 计数工作答案

【问题标题】：I can't make this JavaScript count working我不能让这个 JavaScript 计数工作
【发布时间】：2016-12-21 04:05:04
【问题描述】：

我想在 div 下方创建一个按钮（由 div 组成）和一个段落（或任何文本字段）来计算点击次数。

$(document).ready(function() {
  $('#butt').mousedown(function() {
    $("#butt").hide();

  });
  $("#pushed").mouseup(function() {
    $("#butt").show();

  });
  $("#butt").click(function() {
    button_click();
  });
});


var clicks = 0;

function button_click() {
  clicks = parseInt(clicks) + parseInt(1);
  var divData = document.getElementById("showCount");
  divData.innerHTML = "Clicks:" + clicks;
}

<!-- <link type="text/css" rel="stylesheet" href="CSS.css"/> -->
<form name="ButtonForm">
  <div id="container">

    <div id="pushed"></div>

    <div id="butt"></div>

  </div>

  <div id="showCount"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
  <!--<script src="Untitled-1.js" type="text/javascript"></script>-->
</form>

【问题讨论】：

有什么问题？
基本上，点击根本没有注册，因为你在鼠标按下时隐藏了按钮。该代码应该做什么？当您删除该代码并应用简单计数器时，一切正常：jsfiddle.net/1tpj1box
parseInt(1); 的意义何在？我希望那会抛出。你检查过你的控制台是否有错误吗？
您的 div 元素是空的，并且没有 CSS 可以为它们提供任何明确的大小，因此您将永远无法看到它们来单击它们。
@Carcigenicate：parseInt(1) 确实有效。 1 被转换为字符串，然后解析为 int。

标签： javascript jquery html

【解决方案1】：

您的 div 元素是空的，并且没有 CSS 可以为它们提供任何明确的大小，因此您将永远无法看到它们来单击它们。

此外，mousedown 事件处理程序可以而且应该与butt 的click 处理程序结合使用，mouseup 事件处理程序也应该只是一个click 事件。

此外，您只需要更新点击次数，而不是“点击次数”一词，因此使用 span 元素为该数字创建一个单独的占位符，然后您可以将“点击次数”一词硬编码到div.

最后，要将数字加一，您可以使用前置或后置运算符 (++)。

$(document).ready(function() {
  var clicks = 0;
  var divData = $("#clickCount");
  
  $("#pushed").on("click", function() {
    $("#butt").show();
  });
  
  $("#butt").on("click", function() {
    $("#butt").hide();
    clicks++;  // increment the counter by one
    divData.html(clicks);
  });
});

#pushed, #butt {height:50px; width:150px; background-color:green; margin:5px;}

<body>
  <form name="ButtonForm">
    <div id="container">

      <div id="pushed"></div>

      <div id="butt"></div>

    </div>

    <div id="showCount">Clicks <span id="clickCount"></span></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
  </form>
</body>

【讨论】：

【解决方案2】：

首先，您应该简化代码。无需隐藏和显示按钮即可产生您正在寻找的结果。

其次，将#butt 元素更改为实际按钮，以便您可以查看和点击。

第三，确保你的脚本是在包含 jquery 之后加载的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

<button id="butt">I'm a button</button>
<div id="showCount"></div>

<script>
$(document).ready(function() {

  $("#butt").click(function() {
    button_click();
  });

  var clicks = 0;

  function button_click() {
    clicks = parseInt(clicks) + parseInt(1);
    var divData = document.getElementById("showCount");
    divData.innerHTML = "Clicks:" + clicks;
  }

});
</script>

【讨论】：

也许 OP 想要计算第二个 div 被隐藏了多少次。此外，div 元素的使用在这里也不是什么大问题。这些问题应该在答案中得到解决。