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事件處理程序不起作用

回答

相關問題