Countdown is unexpected decreasing select-elements value by one once and do not go further after tha-CodePudding

I am coding a countdown. The time is selectable, when you clicking start after you selected your time the countdown is starting. Unfortunately, when my countdown is started the countdown value is decreased by one once and after that my countdown is not working further. I do not no why, what is my failure?

window.onload = function() {
  const starter = document.getElementById("actioner");
  const reseter = document.getElementById("reseter");

  const sp = document.querySelector("span");
  const minutesFromSelector = document.getElementById("selM");
  const secondsFromSelector = document.getElementById("selS");

  let interval = null;

  addEventListener("change", () => {
    sp.innerHTML =
      minutesFromSelector.value   ":"   secondsFromSelector.value;
  });

  reseter.addEventListener("click", () => {
    clearInterval(interval);
    sp.innerHTML = "00 : 00";
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    starter.innerText = "Start";
  });

  starter.addEventListener("click", () => {
    starter.innerText = "Stop";
    if (!interval) {
      interval = setInterval(regulSec, 1000);
    } else {
      clearInterval(interval);
      interval = null;
      starter.innerText = "Resume"
    }
  });

  function regulSec() {
    minutes = minutesFromSelector.value;
    seconds = secondsFromSelector.value;
    if (seconds == 0) {
      minutes--;
      seconds = 59;
    } else {
      seconds--;
    }
    sec = seconds < 10 ? "0"   seconds : seconds;
    min = minutes < 10 ? "0"   minutes : minutes;
    sp.innerHTML = ` ${min} : ${sec} `;
    if (minutes == 0 && seconds == 0) {
      clearInterval(interval);
    }
  }
};

body {
  background-color: #ffff;
}

<span>00:00</span>
<button id="actioner">Start</button>
<button id="reseter">reset</button>
<select id="selM">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
  <option>32</option>
  <option>33</option>
  <option>34</option>
  <option>35</option>
  <option>36</option>
  <option>37</option>
  <option>38</option>
  <option>39</option>
  <option>40</option>
  <option>41</option>
  <option>42</option>
  <option>43</option>
  <option>44</option>
  <option>45</option>
  <option>46</option>
  <option>47</option>
  <option>48</option>
  <option>49</option>
  <option>50</option>
  <option>51</option>
  <option>52</option>
  <option>53</option>
  <option>54</option>
  <option>55</option>
  <option>56</option>
  <option>57</option>
  <option>58</option>
  <option>59</option>
</select>

<select id="selS">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
  <option>32</option>
  <option>33</option>
  <option>34</option>
  <option>35</option>
  <option>36</option>
  <option>37</option>
  <option>38</option>
  <option>39</option>
  <option>40</option>
  <option>41</option>
  <option>42</option>
  <option>43</option>
  <option>44</option>
  <option>45</option>
  <option>46</option>
  <option>47</option>
  <option>48</option>
  <option>49</option>
  <option>50</option>
  <option>51</option>
  <option>52</option>
  <option>53</option>
  <option>54</option>
  <option>55</option>
  <option>56</option>
  <option>57</option>
  <option>58</option>
  <option>59</option>
</select>

CodePudding user response：

In the function that is run with the timer, you are getting the value of the drop down for minutes and seconds. Which means every time it is ran, you are getting the same information.

I declared seconds and minutes outside of the function and moved them to the starter event handler since you only need to get them on START.

window.onload = function() {
  const starter = document.getElementById("actioner");
  const reseter = document.getElementById("reseter");
  let seconds = 0;
  let minutes = 0;
  const sp = document.querySelector("span");
  const minutesFromSelector = document.getElementById("selM");
  const secondsFromSelector = document.getElementById("selS");

  let interval = null;

  addEventListener("change", () => {
    sp.innerHTML =
      minutesFromSelector.value   ":"   secondsFromSelector.value;
  });

  reseter.addEventListener("click", () => {
    clearInterval(interval);
    sp.innerHTML = "00 : 00";
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    starter.innerText = "Start";
  });

  starter.addEventListener("click", () => {
    starter.innerText = "Stop";
    if (!interval) {
    minutes = minutesFromSelector.value;
    seconds = secondsFromSelector.value;
      interval = setInterval(regulSec, 1000);
    } else {
      clearInterval(interval);
      interval = null;
      starter.innerText = "Resume"
    }
  });

  function regulSec() {
    if (seconds == 0) {
      minutes--;
      seconds = 59;
    } else {
      seconds--;
    }
    sec = seconds < 10 ? "0"   seconds : seconds;
    min = minutes < 10 ? "0"   minutes : minutes;
    sp.innerHTML = ` ${min} : ${sec} `;
    if (minutes == 0 && seconds == 0) {
      clearInterval(interval);
    }
  }
};

body {
  background-color: #ffff;
}

<span>00:00</span>
<button id="actioner">Start</button>
<button id="reseter">reset</button>
<select id="selM">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
  <option>32</option>
  <option>33</option>
  <option>34</option>
  <option>35</option>
  <option>36</option>
  <option>37</option>
  <option>38</option>
  <option>39</option>
  <option>40</option>
  <option>41</option>
  <option>42</option>
  <option>43</option>
  <option>44</option>
  <option>45</option>
  <option>46</option>
  <option>47</option>
  <option>48</option>
  <option>49</option>
  <option>50</option>
  <option>51</option>
  <option>52</option>
  <option>53</option>
  <option>54</option>
  <option>55</option>
  <option>56</option>
  <option>57</option>
  <option>58</option>
  <option>59</option>
</select>

<select id="selS">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
  <option>32</option>
  <option>33</option>
  <option>34</option>
  <option>35</option>
  <option>36</option>
  <option>37</option>
  <option>38</option>
  <option>39</option>
  <option>40</option>
  <option>41</option>
  <option>42</option>
  <option>43</option>
  <option>44</option>
  <option>45</option>
  <option>46</option>
  <option>47</option>
  <option>48</option>
  <option>49</option>
  <option>50</option>
  <option>51</option>
  <option>52</option>
  <option>53</option>
  <option>54</option>
  <option>55</option>
  <option>56</option>
  <option>57</option>
  <option>58</option>
  <option>59</option>
</select>