Pomodoro Clock: stopping event propagation

Pomodoro Clock: stopping event propagation
0

#1

In this code, the click events triggers whenever I click the button or the span element. How can I get the click event only to apply to the button element?

HTML

<html>
<head>
	<title>Pomodoro Clock</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="Pomodoro Clock.css">
</head>

<body>
<div id="buttons">
	<h1>Pomodoro Clock</h1>
	<p id="break-label">Break Length</p>
	<div id="control-buttons">
		<i class="fas fa-arrow-up" id="break-increment"> <span id="break-length">5</span></i>
        <i class="fas fa-arrow-down" id="break-decrement"></i>
        </div>
	<p id="session-label">Session Length</p>
	<div id="session-buttons">
		<i class="fas fa-arrow-up" id="session-increment"><span id="session-length">25</span></i>
		<i class="fas fa-arrow-down" id="session-decrement"></i>
	</div>
	</div>

<div id="container">
	<p id="timer-label">Session</p>
	<p id="session-length"><span id="time-left">25</span></p>
		<div id="start_stop">
		<i class="fas fa-play"></i>
		<i class="fas fa-stop"></i>		
	</div>
	<i class="fas fa-sync-alt" id="reset"></i>
<script src="Pomodoro Clock.js"></script>

</body>
</html>

JS:

var breakButtonIncrement= document.getElementById("break-increment");
var breakLengthElem = document.getElementById("break-length");
var numberSelector= parseInt(breakLengthElem.innerText);
var sessionIncrement=document.getElementById("session-increment");
var breakButtonDecrement= document.getElementById("break-decrement");
var sessionLengthElem=document.getElementById("session-length");
var sessionSelector= parseInt(sessionLengthElem.innerText);
var sessionDecrement=document.getElementById("session-decrement");



breakButtonIncrement.addEventListener("click", function(){
  numberSelector++;
  breakLengthElem.innerText = numberSelector;
});

breakButtonDecrement.addEventListener("click", function(){
	if(numberSelector>=1){
  numberSelector--;
  breakLengthElem.textContent = numberSelector;}
});

sessionIncrement.addEventListener("click", function(){
  sessionSelector++;
  sessionLengthElem.textContent = sessionSelector;
});

sessionDecrement.addEventListener("click", function(){
  if(sessionSelector>=1){
  	sessionSelector--;}
  sessionLengthElem.textContent = sessionSelector;
});

#2

Simply don’t select span ids and attach event listeners to them like you are doing here.


#3

Thank you. I fixed it by rewriting the code to avoid using spans.