Javascript事件处理程序不工作
我试图在单击按钮时增加/减少段落中的值Javascript事件处理程序不工作,javascript,jquery,Javascript,Jquery,我试图在单击按钮时增加/减少段落中的值 $(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.pr
$(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>
波莫多罗计时器
5
+
-
25
+
-
部分
下面是一个(精简的)解决方案,只需使用vanilla
javascript即可:
函数changeValue(){
var breaktime=this.parentNode.getElementsByClassName('breaktime')[0];
var val=breaktime.innerHTML;
if(this.className==='increment'){
val++;
}
else if(this.className=='decrement'){
瓦尔--;
}
breaktime.innerHTML=val;
}
函数startStop(){
var值=[];
var breaktimes=document.getElementsByClassName('breaktime');
中断时间[1].classList.toggle('递减');
if(中断时间[1].classList.contains('decrenting')==true){
值[1]=parseInt(breaktimes[1].innerHTML);
价值观[1]——;
中断时间[1]。innerHTML=值[1];
var递减器=设置间隔(函数(){
值[0]=parseInt(中断时间[0].innerHTML);
值[1]=parseInt(breaktimes[1].innerHTML);
if(中断时间[1].classList.contains('decrenting')!==true){
清除间隔(递减器);
}
价值观[1]——;
中断时间[1]。innerHTML=值[1];
如果(值[1]==值[0]){
window.alert('计数器已达到'+值[1]);
清除间隔(递减器);
}
}, 1000);
}
}
var buttons=document.getElementsByTagName('button');
var startStopButton=按钮[(buttons.length-1)];
对于(var i=0;(i+1)
5
+
-
25
+
-
部分
启动/停止
如果希望使用构造函数实现逻辑,可以在实例初始化内部绑定事件
是基于html修改代码的。但代码是可以改进的,因此,pomotoro
实例不仅可以减少或增加,还可以同时执行这两个功能
另外,一些模板引擎可以让您轻松定义要添加到页面中的增加/减少块的数量。您可以共享HTML吗also@NarendraCM我和你分享你在@Rounin上缺少了一个clode角括号,我使用的按钮不是四个按钮,id为inner,而是我将添加它感谢Hanks@Rounin,但也可以给我一个提示,告诉我如何为开始/停止按钮添加功能。你能解释一下你希望开始/停止按钮做什么吗?当它点击时,我应该开始从25递减到0,当它等于5时,应该提醒一些事情,当它再次点击时,应该在你发布开始/停止之前停止功能我尝试了另一种方法,我做到了。它正在工作,但当我决定使用重置按钮重置时钟时,我被卡住了。这是时钟的代码笔url,如果你按下开始按钮,它将开始计数。当我尝试递减时,它将递减2个数字,而不是1个数字