javascript - 为什么按钮只会在手动更改输入后更改对象属性？

Question

附件是应用程序的完整代码。 问题在于，如果首先更改 session 长度输入， session 长度部分的按钮只会更改 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" width="240" height="240">
        </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>

`

Answer 1

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