Home > Software engineering >  Alert box appears repeatedly and does not allow user input
Alert box appears repeatedly and does not allow user input

Time：08-25

I am coding a countdown. When the user is clicking start without giving any input it appears a box through the alert function which is displaying the message "input needed". If the user is giving any input after the alert message and clicking start the alert box is undesirable appearing again even though the condition do not allow this. Why is that so, what I am doing wrong? I marked the considered are in my JavaScript up.

 window.onload = function() {
          //Card
          const card = document.getElementById("card");

          //Buttons
          const editer = document.getElementById("editer");
          const reseter = document.getElementById("reseter");
          const x = document.getElementById("close-btn");
          const starter = document.getElementById("starter");
          const quiter = document.getElementById("quiter");

          //"Select"-elements
          const hoursFromSelector = document.getElementById("edt-hours");
          const minutesFromSelector = document.getElementById("edt-minutes");
          const secondsFromSelector = document.getElementById("edt-seconds");

          //For calculation
          const mainclock = document.getElementById("mainclock");

          let interval = null;
          let hours = 0;
          let minutes = 0;
          let seconds = 0;
          let i = true;

          addEventListener("change", () => {
            mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
          });

          reseter.addEventListener("click", () => {
            clearInterval(interval);
            mainclock.innerHTML = "00 : 00 : 00";
            hoursFromSelector.selectedIndex = 0;
            minutesFromSelector.selectedIndex = 0;
            secondsFromSelector.selectedIndex = 0;
            starter.innerText = "Start";
          });
          //Considered Area
          starter.addEventListener("click", () => {
              if (hours == 0 && minutes == 0 && seconds == 0) {
                starter.innerText = "Start";
                clearInterval(interval)
                alert("Input needed");
                return;
              } else if(hours != 0 || minutes != 0 || seconds != 0) {
              card.style.display = "none";
              starter.innerText = "Stop";
              if (!interval) {
                hours = hoursFromSelector.value;
                minutes = minutesFromSelector.value;
                seconds = secondsFromSelector.value;
                interval = setInterval(regulSec, 1000);
              } else {
                clearInterval(interval);
                interval = null;
                starter.innerText = "Resume";
              }
            }
          })

        function regulSec() {
          if (minutes == 0 && hours > 0) {
            hours--;
            minutes = 60;
          }
          if (seconds == 0 && seconds > 0) {
            minutes--;
            seconds = 59;
          } else {
            seconds--;
          }
          h = hours < 10 ? "0"   hours : hours;
          sec = seconds < 10 ? "0"   seconds : seconds;
          min = minutes < 10 ? "0"   minutes : minutes;
          mainclock.innerHTML = `${h} : ${min} : ${sec} `;
          if (minutes == 0 && seconds == 0) {
            starter.innerText = "Start";
            clearInterval(interval);
          }
        }

        //Functions without any actual mathematical reference
        //Showing main-card
        editer.addEventListener("click", () => {
          if (i == true) {
            card.style.display = "block";
            i = false;
          } else if (i == false) {
            card.style.display = "none";
            i = true;
          }
        });

        //Closing-button for main-card
        x.addEventListener("click", () => {
          card.style.display = "none";
          i = true;
        });

        quiter.addEventListener("click", () => {
          confirm("Are you sure that you do not want to save your settings?");
          if (true) {
            card.style.display = "none";
            hoursFromSelector.selectedIndex = 0;
            minutesFromSelector.selectedIndex = 0;
            secondsFromSelector.selectedIndex = 0;
            mainclock.innerHTML = "00 : 00 : 00";
          }
        });
        }

body {
  background-color: rgba(253, 253, 10, 0.620);
}

#mainboard {
  margin: 45vh;
}

[a] {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  color: black;
  font-size: 120%;
}

#main-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vh;
}

#card {
  width: 20vh;
  height: 20vh;
  border: 1px solid;
  border-color: black;
  border-radius: 5px;
  position: absolute;
  top: 1px;
  left: 3;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

#start {
  background-color: #4AC33C;
}

#card-hdng {
  background-color: #2f2f2f;
  color: white;
}

<body>

  <div id="mainboard">
    <div a id="mainclock">00 : 00 : 00</div>
    <div id="main-btn">
      <button  id="editer">Edit</button>
      <button  id="reseter">Reset</button>
      <button  id="starter">Start</button>
    </div>
  </div>

  <div style="display:none" id="card">
    <div id="card-hdng">Settings <button id="close-btn">X</button></div>
    <div id="card-items">
      <label for="edt-hours">Hours</label>
      <select id="edt-hours" placeholder="00">
        <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
        <option>60</option>
        <option>61</option>
        <option>62</option>
        <option>63</option>
        <option>64</option>
        <option>65</option>
        <option>66</option>
        <option>67</option>
        <option>68</option>
        <option>69</option>
        <option>70</option>
        <option>71</option>
        <option>72</option>
        <option>73</option>
        <option>74</option>
        <option>75</option>
        <option>76</option>
        <option>77</option>
        <option>78</option>
        <option>79</option>
        <option>80</option>
        <option>81</option>
        <option>82</option>
        <option>83</option>
        <option>84</option>
        <option>85</option>
        <option>86</option>
        <option>87</option>
        <option>88</option>
        <option>89</option>
        <option>90</option>
        <option>91</option>
        <option>92</option>
        <option>93</option>
        <option>94</option>
        <option>95</option>
        <option>96</option>
        <option>97</option>
        <option>98</option>
        <option>99</option>
      </select>
      <label for="edt-minutes">Minutes</label>
      <select id="edt-minutes">
        <option>00&nbsp;&nbsp;</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
      <label for="edt-seconds">Seconds</label>
      <select id="edt-seconds">
        <option>00&nbsp;&nbsp;</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
      <button id="quiter">Quit</button>
      <button >Start</button>
    </div>
  </div>

</body>

CodePudding user response：

Answer to the question: You alert box was firing despite changing the values, because the variables were never being updated when the selectbox was changing. The solution was to add to the event listener (that listened for changes on the select boxes) the updated value to the variable.

Your code with the alert firing:

if (hours == 0 && minutes == 0 && seconds == 0)
{
  starter.innerText = "Start";
  clearInterval(interval)
  alert("Input needed");
  //return; return is unnecessary
}
else if(hours != 0 || minutes != 0 || seconds != 0)
{
  card.style.display = "none";
  starter.innerText = "Stop";
  if (!interval)
  {
    hours = hoursFromSelector.value;
    minutes = minutesFromSelector.value;
    seconds = secondsFromSelector.value;
    interval = setInterval(regulSec, 1000);
  }
  else
  {
    clearInterval(interval);
    interval = null;
    starter.innerText = "Resume";
  }
}

was caused because you never update seconds, minutes, or hours, which is what your code checks for - it was fixed by making the following change below:

addEventListener("change", () => {
  if (!(interval))
  {
    hours = Number(hoursFromSelector.value);
    minutes = Number(minutesFromSelector.value);
    seconds = Number(secondsFromSelector.value);
  }
  mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;});

Fixes:

  1. Fixed missing parenthesis.
  2. You need to set hours, minutes, and seconds to the value of their respective selectors, casted to a Number, whenever they get updated from the selectbox. As I learned yesterday, using parseInt is highly not recommended for a reason I can't recall, other than that Number handles more use cases.
  3. You need to save the input from the confirm() inside the quiter.addEventListener listener and use it in the if statement.
  4. Inside of the "change" event listener, check to see if interval is null - there was a bug where if the clock was running you could change a select value, and change the value of the clock.

window.onload = function() {
  //Card
  const card = document.getElementById("card");

  //Buttons
  const editer = document.getElementById("editer");
  const reseter = document.getElementById("reseter");
  const x = document.getElementById("close-btn");
  const starter = document.getElementById("starter");
  const quiter = document.getElementById("quiter");

  //"Select"-elements
  const hoursFromSelector = document.getElementById("edt-hours");
  const minutesFromSelector = document.getElementById("edt-minutes");
  const secondsFromSelector = document.getElementById("edt-seconds");

  //For calculation
  const mainclock = document.getElementById("mainclock");

  let interval = null;
  let hours = 0;
  let minutes = 0;
  let seconds = 0;
  let i = true;

  addEventListener("change", () => {
    if (!(interval))
    {
      hours = Number(hoursFromSelector.value);
      minutes = Number(minutesFromSelector.value);
      seconds = Number(secondsFromSelector.value);
    }
    mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
  });

  reseter.addEventListener("click", () => {
    clearInterval(interval);
    mainclock.innerHTML = "00 : 00 : 00";
    hoursFromSelector.selectedIndex = 0;
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    starter.innerText = "Start";
  });
  //Considered Area
  starter.addEventListener("click", () => {
    if (hours == 0 && minutes == 0 && seconds == 0) {
      //button.innerText = "Start";
      starter.innerText = "Start";
      clearInterval(interval)
      alert("Input needed");
    } else if (hours != 0 || minutes != 0 || seconds != 0) {
      card.style.display = "none";
      starter.innerText = "Stop";
      if (!interval) {
        hours = Number(hoursFromSelector.value);
        minutes = Number(minutesFromSelector.value);
        seconds = Number(secondsFromSelector.value);
        interval = setInterval(regulSec, 1000);
      } else {
        clearInterval(interval);
        interval = null;
        starter.innerText = "Resume";
      }
    }
  });

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

//Functions without any actual mathematical reference
//Showing main-card
editer.addEventListener("click", () => {
  if (i == true) {
    card.style.display = "block";
    i = false;
  } else if (i == false) {
    card.style.display = "none";
    i = true;
  }
});

//Closing-button for main-card
x.addEventListener("click", () => {
  card.style.display = "none";
  i = true;
});

quiter.addEventListener("click", () => {
  k = confirm("Are you sure that you do not want to save your settings?");
  if (k) {
    card.style.display = "none";
    hoursFromSelector.selectedIndex = 0;
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    mainclock.innerHTML = "00 : 00 : 00";
  }
});
};
body {
  background-color: rgba(253, 253, 10, 0.620);
}

#mainboard {
  margin: 45vh;
}

[a] {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  color: black;
  font-size: 120%;
}

#main-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vh;
}

#card {
  width: 20vh;
  height: 20vh;
  border: 1px solid;
  border-color: black;
  border-radius: 5px;
  position: absolute;
  top: 1px;
  left: 3;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

#start {
  background-color: #4AC33C;
}

#card-hdng {
  background-color: #2f2f2f;
  color: white;
}
<body>

  <div id="mainboard">
    <div a id="mainclock">00 : 00 : 00</div>
    <div id="main-btn">
      <button  id="editer">Edit</button>
      <button  id="reseter">Reset</button>
      <button  id="starter">Start</button>
    </div>
  </div>

  <div style="display:none" id="card">
    <div id="card-hdng">Settings <button id="close-btn">X</button></div>
    <div id="card-items">
      <label for="edt-hours">Hours</label>
      <select id="edt-hours" placeholder="00">
        <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
        <option>60</option>
        <option>61</option>
        <option>62</option>
        <option>63</option>
        <option>64</option>
        <option>65</option>
        <option>66</option>
        <option>67</option>
        <option>68</option>
        <option>69</option>
        <option>70</option>
        <option>71</option>
        <option>72</option>
        <option>73</option>
        <option>74</option>
        <option>75</option>
        <option>76</option>
        <option>77</option>
        <option>78</option>
        <option>79</option>
        <option>80</option>
        <option>81</option>
        <option>82</option>
        <option>83</option>
        <option>84</option>
        <option>85</option>
        <option>86</option>
        <option>87</option>
        <option>88</option>
        <option>89</option>
        <option>90</option>
        <option>91</option>
        <option>92</option>
        <option>93</option>
        <option>94</option>
        <option>95</option>
        <option>96</option>
        <option>97</option>
        <option>98</option>
        <option>99</option>
      </select>
      <label for="edt-minutes">Minutes</label>
      <select id="edt-minutes">
        <option>00&nbsp;&nbsp;</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
      <label for="edt-seconds">Seconds</label>
      <select id="edt-seconds">
        <option>00&nbsp;&nbsp;</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
      <button id="quiter">Quit</button>
      <button >Start</button>
    </div>
  </div>

</body>

PS: Sorry for my initial comment - your code is actually well organized and thought out. I think it was my freak reaction from seeing all the stuff I was going to have to parse and try to understand.

CodePudding user response：

Here's my current version of the code, with the initial problem fixed (still getting negative numbers when the timer starts, though)

window.onload = function() {
  //Card
  const card = document.getElementById("card");

  //Buttons
  const editer = document.getElementById("editer");
  const reseter = document.getElementById("reseter");
  const x = document.getElementById("close-btn");
  const starter = document.getElementById("starter");
  const quiter = document.getElementById("quiter");

  //"Select"-elements
  const hoursFromSelector = document.getElementById("edt-hours");
  const minutesFromSelector = document.getElementById("edt-minutes");
  const secondsFromSelector = document.getElementById("edt-seconds");

  //For calculation
  const mainclock = document.getElementById("mainclock");

  let interval = null;
  let hours = 0;
  let minutes = 0;
  let seconds = 0;
  let i = true;

    addEventListener("change", () => {
      mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
    });
    reseter.addEventListener("click", () => {
        clearInterval(interval);
        mainclock.innerHTML = "00 : 00 : 00";
        hoursFromSelector.selectedIndex = 0;
        minutesFromSelector.selectedIndex = 0;
        secondsFromSelector.selectedIndex = 0;
        starter.innerText = "Start";
      });
      //Considered Area
      starter.addEventListener("click", () => {
        if (parseInt(hoursFromSelector.value) === 0 && parseInt(minutesFromSelector.value) === 0 && parseInt(secondsFromSelector.value) === 0) {
          starter.innerText = "Start";
          clearInterval(interval)
          alert("Input needed");
          return;
        } else if (parseInt(hoursFromSelector.value) != 0 || parseInt(minutesFromSelector.value) != 0 || parseInt(secondsFromSelector.value) != 0) {
          card.style.display = "none";
          starter.innerText = "Stop";
        }
          if (!interval) {
            hours = parseInt(hoursFromSelector.value);
            minutes = parseInt(minutesFromSelector.value);
            seconds = parseInt(secondsFromSelector.value);
            interval = setInterval(regulSec, 1000);
          } else {
            clearInterval(interval);
            interval = null;
            starter.innerText = "Resume";
          }
      });
    
    function regulSec() {
      if (minutes == 0 && hours > 0) {
        hours--;
        minutes = 60;
      }
      if (seconds == 0 && seconds > 0) {
        minutes--;
        seconds = 59;
      } else {
        seconds--;
      }
      h = hours < 10 ? "0"   hours : hours;
      sec = seconds < 10 ? "0"   seconds : seconds;
      min = minutes < 10 ? "0"   minutes : minutes;
      mainclock.innerHTML = `${h} : ${min} : ${sec} `;
      if (minutes == 0 && seconds == 0) {
        starter.innerText = "Start";
        clearInterval(interval);
      }
    }
    
    //Functions without any actual mathematical reference
    //Showing main-card
    editer.addEventListener("click", () => {
      if (i == true) {
        card.style.display = "block";
        i = false;
      } else if (i == false) {
        card.style.display = "none";
        i = true;
      }
    });
    
    //Closing-button for main-card
    x.addEventListener("click", () => {
      card.style.display = "none";
      i = true;
    });
    
    quiter.addEventListener("click", () => {
      confirm("Are you sure that you do not want to save your settings?");
      if (true) {
        card.style.display = "none";
        hoursFromSelector.selectedIndex = 0;
        minutesFromSelector.selectedIndex = 0;
        secondsFromSelector.selectedIndex = 0;
        mainclock.innerHTML = "00 : 00 : 00";
      }
    });
}
    body {
  background-color: rgba(253, 253, 10, 0.620);
}

#mainboard {
  margin: 45vh;
}

[a] {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  color: black;
  font-size: 120%;
}

#main-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vh;
}

#card {
  width: 20vh;
  height: 20vh;
  border: 1px solid;
  border-color: black;
  border-radius: 5px;
  position: absolute;
  top: 1px;
  left: 3;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

#start {
  background-color: #4AC33C;
}

#card-hdng {
  background-color: #2f2f2f;
  color: white;
}
  <div id="mainboard">
    <div a id="mainclock">00 : 00 : 00</div>
    <div id="main-btn">
      <button  id="editer">Edit</button>
      <button  id="reseter">Reset</button>
      <button  id="starter">Start</button>
    </div>
  </div>

  <div style="display:none" id="card">
    <div id="card-hdng">Settings <button id="close-btn">X</button></div>
    <div id="card-items">
      <label for="edt-hours">Hours</label>
      <select id="edt-hours" placeholder="00">
        <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
        <option>60</option>
        <option>61</option>
        <option>62</option>
        <option>63</option>
        <option>64</option>
        <option>65</option>
        <option>66</option>
        <option>67</option>
        <option>68</option>
        <option>69</option>
        <option>70</option>
        <option>71</option>
        <option>72</option>
        <option>73</option>
        <option>74</option>
        <option>75</option>
        <option>76</option>
        <option>77</option>
        <option>78</option>
        <option>79</option>
        <option>80</option>
        <option>81</option>
        <option>82</option>
        <option>83</option>
        <option>84</option>
        <option>85</option>
        <option>86</option>
        <option>87</option>
        <option>88</option>
        <option>89</option>
        <option>90</option>
        <option>91</option>
        <option>92</option>
        <option>93</option>
        <option>94</option>
        <option>95</option>
        <option>96</option>
        <option>97</option>
        <option>98</option>
        <option>99</option>
      </select>
      <label for="edt-minutes">Minutes</label>
      <select id="edt-minutes">
        <option>00&nbsp;&nbsp;</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
      <label for="edt-seconds">Seconds</label>
      <select id="edt-seconds">
        <option>00&nbsp;&nbsp;</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</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>
      <button id="quiter">Quit</button>
      <button >Start</button>
    </div>
  </div>

CodePudding user response：

Note: This is not a valid answer, just based on @shmacks code (link to the post above)

I also have noticed that something is still broken, depending on whether you select seconds (working afaik), minutes, or hours.

Nevertheless, I recommend:

  • using speaking variable and method names
  • extracting reused (or "complex") code into methods - complexity depends on the view and knowledge) - e.g. code containing comparisons and calculations.

For example, your x, starter, and quiter variables. I have just used editButton instead of editer, etc.

The i variable still troubles me :)

I know, the updated piece of code below is not perfect. I am still new to Javascript and happy to get feedback.

window.onload = function() {
  const card = document.getElementById("card");

  const editButton = document.getElementById("editer");
  const resetButton = document.getElementById("reseter");
  const closeButton = document.getElementById("close-btn");
  const startButton = document.getElementById("starter");
  const quitButton = document.getElementById("quiter");

  const hoursFromSelector = document.getElementById("edt-hours");
  const minutesFromSelector = document.getElementById("edt-minutes");
  const secondsFromSelector = document.getElementById("edt-seconds");

  const mainclock = document.getElementById("mainclock");
  let interval = null;
  let hours = Number(hoursFromSelector.innerHTML);
  let minutes = Number(minutesFromSelector.innerHTML);
  let seconds = Number(secondsFromSelector.innerHTML);
  let i = true;

  addEventListener("change", () => {
    mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
  });

  resetButton.addEventListener("click", () => {
    clearInterval(interval);
    resetClock();
    resetSelectedIndexes();
    startButton.innerText = "Start";
  });

  startButton.addEventListener("click", () => {
    const noTimeSet = hours == 0 && minutes == 0 && seconds == 0
    const anyTimeSet = hours != 0 || minutes != 0 || seconds != 0
    
    if (noTimeSet) {
      startButton.innerText = "Start";
      clearInterval(interval)
      alert("Input needed");
      return;
    }

    if (anyTimeSet) {
      hideCard();
      startButton.innerText = "Stop";
      if (!interval) {
        hours = hoursFromSelector.value;
        minutes = minutesFromSelector.value;
        seconds = secondsFromSelector.value;
        interval = setInterval(regulSec, 1000);
      } else {
        clearInterval(interval);
        interval = null;
        startButton.innerText = "Resume";
      }
    }
  });

function regulSec() {
  if (minutes == 0 && hours > 0) {
    hours--;
    minutes = 60;
  }
  if (seconds == 0 && seconds > 0) {
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }
  h = hours < 10 ? "0"   hours : hours;
  sec = seconds < 10 ? "0"   seconds : seconds;
  min = minutes < 10 ? "0"   minutes : minutes;
  mainclock.innerHTML = `${h} : ${min} : ${sec} `;
  if (minutes == 0 && seconds == 0) {
    startButton.innerText = "Start";
    clearInterval(interval);
  }
}

editButton.addEventListener("click", () => {
  if (i == true) {
    showCard();
    i = false;
  } else if (i == false) {
    hideCard();
    i = true;
  }
});

closeButton.addEventListener("click", () => {
  hideCard();
  i = true;
});

quitButton.addEventListener("click", () => {
  k = confirm("Are you sure that you do not want to save your settings?");
  if (k) {
    hideCard();
    resetSelectedIndexes();
    resetClock();
  }
});
};

function hideCard() {
  card.style.display = "none";
}

function showCard() {
  card.style.display = "block";
}

function resetClock() {
  mainclock.innerHTML = "00 : 00 : 00";
}

function resetSelectedIndexes() {
  hoursFromSelector.selectedIndex = 0;
  minutesFromSelector.selectedIndex = 0;
  secondsFromSelector.selectedIndex = 0;
}

Page link：https//www.codepudding.com/Softwareengineering/522282.html

Prev:audio play & pause in react
Next:swift sort array of dictionary by a fixed value
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding