Javascript事件处理程序无法正常工作

Question

I am trying to to increment/decrement a value in a paragraph when a button is clicked. 我试图在单击按钮时增加/减少段落中的值。

$(document).ready(function() {
  var breakTime = 5;
  var section = 25;
  var start = "Start";
  var stop = "Stop";


  function Pomodoro(element, target) {
    this.element = element;
    this.target = target;
  };

  Pomodoro.prototype.incrementer = function incrementer() {
    // this takes care of break and section timers incrementing

    this.element.click(function() {
      breakTime++;
      var el = this.target;
      el.html(breakTime);
    });
  };
  // end

  Pomodoro.prototype.decrementer = function decrementer() {
    // this takes care of break and section timers incrementing

    breakerDec.element.click(function() {
      breakTime--;
      var el = breakerDec.target.html(breakTime);
    });
  };
  // end

  var breakerInc = new Pomodoro();
  var ele = $("#inner1");
  var tar = $("#par");

  breakerInc.element = ele;
  breakerInc.target = tar;

  breakerInc.incrementer.bind(breakerInc);
  //end

  var breakerDec = new Pomodoro();

  breakerDec.element = $("#inner2");
  breakerDec.target = $("#par");

  breakerDec.decrementer();

  var sectionInc = new Pomodoro($("#inner3"), $("#par2"));
  sectionInc.incrementer.bind(sectionInc);
});

and i am getting no result when i click the button. 当我点击按钮时，我没有得到任何结果。 this is the html: 这是html：

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomodoro Timer</title><!-- End of Title -->
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="top">
        <div class="div div-1"><p id="par" class="breaktime-1">5</p>
          <div  class="inner-div inner-1"><button id="inner1" type="button" class="btn">+</button></div>
          <div class="inner-div inner-2"><button id="inner2" type="button" class="btn">-</button></div>
        </div>
        <div class="div div-2"><p id="par2" class="breaktime">25</p>
          <div class="inner-div inner-1"><button id="inner3" type="button" class="btn">+</button></div>
          <div class="inner-div inner-2"><button id="inner4" type="button" class="btn">-</button></div>
        </div>
      </div>
      <div class="div div-3">
        <h3 class="heading">section</h3>
        <button type="button" class="btn-Start-Stop"></button
      </div>
      <div><p></p></div>
    </div>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script> 
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Answer 1

Here is one (trimmed-down) solution just using vanilla javascript: 这是一个（精简）解决方案，只使用vanilla javascript：

 function changeValue() { var breaktime = this.parentNode.getElementsByClassName('breaktime')[0]; var val = breaktime.innerHTML; if (this.className === 'increment') { val++; } else if (this.className === 'decrement') { val--; } breaktime.innerHTML = val; } function startStop() { var values = []; var breaktimes = document.getElementsByClassName('breaktime'); breaktimes[1].classList.toggle('decrementing'); if (breaktimes[1].classList.contains('decrementing') === true) { values[1] = parseInt(breaktimes[1].innerHTML); values[1]--; breaktimes[1].innerHTML = values[1]; var decrementer = setInterval(function(){ values[0] = parseInt(breaktimes[0].innerHTML); values[1] = parseInt(breaktimes[1].innerHTML); if (breaktimes[1].classList.contains('decrementing') !== true) { clearInterval(decrementer); } values[1]--; breaktimes[1].innerHTML = values[1]; if (values[1] === values[0]) { window.alert('The counter has reached ' + values[1]); clearInterval(decrementer); } }, 1000); } } var buttons = document.getElementsByTagName('button'); var startStopButton = buttons[(buttons.length -1)]; for (var i = 0; (i+1) < buttons.length; i++) { buttons[i].addEventListener('click',changeValue,false); } startStopButton.addEventListener('click',startStop,false);

 <section> <div> <p class="breaktime">5</p> <button id="inner1" type="button" class="increment">+</button> <button id="inner2" type="button" class="decrement">-</button> </div> <div> <p class="breaktime">25</p> <button id="inner3" type="button" class="increment">+</button> <button id="inner4" type="button" class="decrement">-</button> </div> <div> <h3>Section</h3> <button type="button" class="btn-Start-Stop">Start / Stop</button> </div> <div> <p></p> </div> </section>

Answer 2

If you'd like to implement logic using constructors, you can bind events inside of initialization of your instance. 如果您想使用构造函数实现逻辑，则可以在实例的初始化内绑定事件。

Here is reworked your code based on your html. 这是根据您的HTML重新编写您的代码。 But code could be improved, so Pomodoro instance can be able not only to decrease or increase, but do both functions. 但代码可以改进，因此Pomodoro实例不仅可以减少或增加，而且可以同时执行这两个功能。

Also some template engine can give you ability to easy define amount of increase/decrease blocks you want to add to your page. 此外，一些模板引擎可以让您轻松定义要添加到页面的增加/减少块的数量。

Javascript事件处理程序无法正常工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-01-21 12:10:34

解决方案2
0 2016-01-21 12:47:09

Javascript事件处理程序无法正常工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-01-21 12:10:34

解决方案2 0 2016-01-21 12:47:09

解决方案1
0 已采纳 2016-01-21 12:10:34

解决方案2
0 2016-01-21 12:47:09