Javascript事件处理程序不起作用

我试图在单击按钮时在段落中增加/减少值。Javascript事件处理程序不起作用

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

当我点击按钮时，我没有得到任何结果。这是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>

来源

2016-01-21 Yya09

你能分享你的HTML也 –

@NarendraCM我分享 – Yya09

你在'

这里是一个（简装）解决方案，只是用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>

来源

2016-01-21 12:10:34 Rounin

谢谢@Rounin，但也可以给我一个提示如何添加功能启动/停止按钮 – Yya09

你能解释它是什么你想要开始/停止按钮来做什么？ – Rounin

当它得到点击我应该开始从25递减到0，当它等于5时，它应该提示某事 – Yya09

如果你想实现使用逻辑构造，您可以在实例的初始化内部绑定事件。

Here是根据您的html重写您的代码。但是代码可以改进，所以Pomodoro实例不仅可以减少或增加，而且可以执行这两种功能。

此外，某些模板引擎可以让您轻松定义要添加到页面的增加/减少块的数量。

来源

2016-01-21 12:47:09

我treid但当我尝试减少它会减少2个数字，而不是1个数字 – Yya09

Javascript事件处理程序不起作用

回答

相关问题