为啥按钮只会在手动更改输入后更改对象属性？

Posted 2023-05-09

【中文标题】为啥按钮只会在手动更改输入后更改对象属性？

【英文标题】：why the button will only change the object properties after the input is manually changed?为什么按钮只会在手动更改输入后更改对象属性？

【发布时间】：2018-09-18 04:09:07

【问题描述】：

附件是应用程序的完整代码。 问题在于，如果首先更改会话长度输入，会话长度部分的按钮只会更改 CLOCK.session 属性和 #countdown 跨度。奇怪的是，这段代码在我开始对页面进行 CSS 样式设置之前就可以工作了，但它没有（而且不应该有任何联系）。 感谢您的帮助！`

const canvas = document.querySelector('#timer-circle');
const context = canvas.getContext('2d');
const CLOCK = 
	timerInit: function() 
		context.beginPath();
		context.strokeStyle = "#527A71";
		context.lineWidth = 2;
		context.arc(120, 120, 118, 0, 2 * Math.PI);
		context.stroke();
	,
	drawStep: function() 
		context.beginPath();
		context.lineWidth = 4;
		context.fillStyle = "#505000";
		context.arc(120, 120, 115, Math.PI / 2 - Math.PI * CLOCK.whichSession().timeStep, Math.PI / 2 + Math.PI * CLOCK.whichSession().timeStep);
		context.stroke();
		context.fill();
		document.querySelector('#countdown').innerText = Math.floor(CLOCK.whichSession().timeZero / 60).toString() + ':' + (CLOCK.whichSession().timeZero % 60).toString();
	,
	initCount: function(total) 
		total *= 60
		if(CLOCK.sessionSwitch) 
			CLOCK.session.timeZero = total;
			let localTimeZero = total;
			CLOCK.session.timeStep = (total - localTimeZero) / total;
		
		else if(!CLOCK.sessionSwitch) 
			CLOCK.breakProp.timeZero = total;
			let localTimeZero = total;
			CLOCK.breakProp.timeStep = (total - localTimeZero) / total;
		
	,
	clockDisplay: function(total, zero) 
		document.querySelector('#countdown').innerText = total.toString() + ':00';
	,
	timerReset: function() 
		context.clearRect(0, 0, canvas.width, canvas.height);
		//INITIALIZING FUNCTIONS AND BUTTONS
	,
	whichSession: function() 
		return CLOCK.sessionSwitch ? CLOCK.session : CLOCK.breakProp;
	,
	timerCount: function() 
		if(CLOCK.whichSession().timeStep <= 1) 
			CLOCK.drawStep();
			CLOCK.whichSession().timeZero--;
			CLOCK.whichSession().timeStep = (60 * CLOCK.whichSession().timeTotal - CLOCK.whichSession().timeZero) / (60 * CLOCK.whichSession().timeTotal);
		
		else if(CLOCK.whichSession().timeStep >= 1) 
			if(CLOCK.sessionSwitch) 
				// INITIALIZING BREAK COUNT
				CLOCK.sessionSwitch = false;
				document.querySelector('#label').innerText = 'Break!';
				CLOCK.timerReset();
				CLOCK.timerInit();
				CLOCK.initCount(CLOCK.breakProp.timeTotal);
			
			else if(!CLOCK.sessionSwitch) 
				// INITIALIZING SESSION COUNT
				CLOCK.sessionSwitch = true;
				document.querySelector('#label').innerText = 'Session';
				CLOCK.timerReset();
				CLOCK.timerInit();
				CLOCK.initCount(CLOCK.session.timeTotal);
			
			//reset the circle
			//switch the countdown to the correct time
			CLOCK.drawStep();
			CLOCK.whichSession().timeZero--;
			CLOCK.whichSession().timeStep = (60 * CLOCK.whichSession().timeTotal - CLOCK.whichSession().timeZero) / (60 * CLOCK.whichSession().timeTotal);
		
	,
	timerSwitch: false,
	sessionSwitch: true,
	session: 
		timeTotal: undefined,
		timeZero: undefined,
		timeStep: undefined
	,
	breakProp: 
		timeTotal: undefined,
		timeZero: undefined,
		timeStep: undefined
	,
	timerInterval: undefined,
;
$(document).ready(function() 
	CLOCK.timerInit()
	CLOCK.clockDisplay(document.querySelector('#session-length input').value);
	CLOCK.session.timeTotal = Number(document.querySelector('#session-length input').value)
	CLOCK.breakProp.timeTotal = Number(document.querySelector('#break-length input').value)
	$('button.increase').click(function() 
		if($(this)['0'].nextElementSibling.value >= 1 && $(this)['0'].nextElementSibling.value < 99) 
			if(this.parentNode.id == 'session-length') 
				$(this)['0'].nextElementSibling.value++;
				CLOCK.session.timeTotal++;
				CLOCK.clockDisplay($(this)[0].nextElementSibling.value);
			
			else if(this.parentNode.id = 'break-length') 
				$(this)['0'].nextElementSibling.value++;
				CLOCK.breakProp.timeTotal++;
			
		
	);
	$('button.decrease').click(function() 
		if($(this)['0'].previousElementSibling.value > 1 && $(this)['0'].previousElementSibling.value <= 99) 
			$(this)['0'].previousElementSibling.value--;
			if(this.parentNode.id == 'session-length') 
				CLOCK.session.timeTotal--;
				CLOCK.clockDisplay($(this)[0].previousElementSibling.value);
			
			else if(this.parentNode.id = 'break-length') 
				CLOCK.breakProp.timeTotal--;
			
		
	);
	$('input').on('keyup', function() 
		if(this.parentNode.id = 'session-length') 
			CLOCK.session.timeTotal = Number(this.value);
			CLOCK.clockDisplay(this.value);
		
		else if(this.parentNode.id = 'break-length') 
			CLOCK.breakProp.timeTotal = Number(this.value);
		
	);
	$('#timer-count').on('click', function() 
		if(!CLOCK.timerSwitch) 
			CLOCK.initCount(CLOCK.session.timeTotal);
			CLOCK.timerInterval = setInterval(CLOCK.timerCount, 1000);
			CLOCK.timerSwitch = true;
			$('button, input').prop('disabled', true);
		
		else if(CLOCK.timerSwitch) 
			clearInterval(CLOCK.timerInterval);
			CLOCK.timerSwitch = false;
			CLOCK.sessionSwitch = true;
			CLOCK.clockDisplay(CLOCK.session.timeTotal, )
			CLOCK.timerReset();
			CLOCK.timerInit();
			$('button, input').prop('disabled', false);
		
	);
);

body 
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(38, 36, 0, 1) 51%, rgba(81, 66, 0, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(38, 36, 0, 1) 51%, rgba(81, 66, 0, 1) 100%);
  background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(38, 36, 0, 1) 51%, rgba(81, 66, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#514200', GradientType=1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;


#clock-container 
  margin: 100px 20% 0 35%;
  color: white;


input 
  width: 65px;
  background-color: transparent;
  color: inherit;
  border: solid 7px green;
  border-radius: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 2em;


.input 
  display: inline-block;
  margin-right: 10%;


.clock-form 
  display: flex;
  padding: 0 5%;


.decrease 
  margin-left: 0px;



#animation 
  margin-top: 50px;
  margin-left: 7%;


#timer-count 
  position: absolute;
  text-align: center;
  width: 240px;
  height: 240px;
  z-index: 2;
  padding: 80px 20px;
  font-size: 25px;
  font-weight: 600;


#timer-circle 
  position: absolute;
  z-index: 1;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Alon's Pomodoro Clock</title>
    <!-- =========JQUERY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- ==============>BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- ============>FONT -->
    <link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">
    <!-- ================>STYLESHEET -->
    <link rel="stylesheet" href="stylesheet.css">
  </head>

  <body>
    <div id="clock-container">
      <h1>Alon's Pomodoro Clock</h1>
      <div id="session-length" class="input">
        <h3>Session Length</h3>
        <div class="clock-form">
          <button class="increase">+</button>
          <input type="text" maxlength="2" value="25" />
          <button class="decrease">-</button>
        </div>
      </div>
      <div id="break-length" class="input">
        <h3>Break Length</h3>
        <div class="clock-form">
          <button class="increase">+</button>
          <input type="text" maxlength="2" value="5" />
          <button class="decrease">-</button>
        </div>
      </div>
      <div id="animation">
        <canvas id="timer-circle"  >
        </canvas>
        <div id="timer-count">
          <span id="label">Session</span>
          <span id="countdown">01:00</span>
        </div>
      </div>
    </div>
    <script src="javascript.js"></script>
  </body>

</html>

`

【问题讨论】：

我点击.timer-count，它开始有一点延迟。

这是另一个错误，我会处理。但是我担心的bug是加减键只会影响#countdown中的时间在手动更改输入后，否则不起作用

【参考方案1】：

已解决！ 问题是我在编辑css时添加了一个带有.clock-form类的div，因此$(this)['0'].parentNode.id指的是.clock-form而不是session-input或break-input。虽然我还没有弄清楚为什么在手动向输入中插入值后按钮会起作用。