Можете ли вы гнездиться на событиях щелчка?

Question

Я делаю часы pomodoro с таймером прерывания и таймером сеанса. Я использую один numpad для ввода данных в каждый такт, пытаясь вставить событие o'clock, чтобы установить каждый такт. Чтобы это произошло, вы нажимаете на дисплей на часы, а затем начинаете вводить кнопки. 0-9 кнопка удаления и кнопка ввода. Я не смог заставить его даже отображать что-либо для любой функции. Поэтому я начинаю задаваться вопросом, будет ли то, что я пытаюсь сделать, даже работать? Просто ищите, можете ли вы вложить события кликов, и если да, то что я делаю неправильно. Или другой метод для того, что я ищу. Сделал скрипку для ее просмотра, сводя к минимуму окна js и css. https://jsfiddle.net/zackluckyf/jhe98j05/1/

$(".session-time-clock").click(function(){ 
      // changes the color to make it flash, add a duration and then change it back 
      $(".num-button").css("background-color", "#BCC6CC"); 
      function myFunction() { 
       myVar = setTimeout(changeBackground, 500); 
      } 
      function changeBackground() { 
       $(".num-button").css("background-color", "#575e62"); 
      } 
      myFunction(); 
      sessionTimeClock = "00:00"; 
      counter = 4; 
     /* 

     Will this work? 

     */ 
     $("button").click(function(){ 
      // gets button text label 
      var input = $(this).text(); 
      // if, else if chain for calculator functions 
      if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1) 
       { 
        if(counter === 4) 
         { 
          sessionTimeClock = sessionTimeClock.slice(0,counter-1) + input; 
         } 
        if(counter === 3) 
         { 
          sessionTimeClock = "00:" + input + sessionTimeClock.slice(4); 
         } 
        if(counter === 1) 
         { 
          sessionTimeClock = "0" + input + sessionTimeClock.slice(2); 
         } 
        if(counter === 0) 
         { 
          sessionTimeClock = input + sessionTimeClock.slice(1); 
         } 
        counter--; 
        if(counter === 2) 
         { 
          counter--; 
         } 
       } 
      else if(input === "X") 
       { 
        if(counter === 3) 
         { 
          sessionTimeClock = "00:0" + sessionTimeClock.slice(4); 
         } 
        else if(counter === 1) 
         { 
          sessionTimeClock = "00:" + sessionTimeClock.slice(3); 
         } 
        else if(counter === 0) 
         { 
          sessionTimeClock = "0" + sessionTimeClock.slice(1); 
         } 
       } 
      else if(input === "Enter") 
       { 
        return; 
       } 
      $(".session-time-clock").text("hello"); 
     }); 
    }); 

    $(".break-time-clock").click(function(){ 
     $(".num-button").css("background-color", "#BCC6CC"); 
     function myFunction() { 
      myVar = setTimeout(changeBackground, 500); 
     } 
     function changeBackground() { 
      $(".num-button").css("background-color", "#575e62"); 
     } 
     myFunction(); 
     breakTimeClock = "00:00"; 
     counter = 4; 
     $("button").click(function(){ 
      // gets button text label 
      var input = $(this).text(); 
      // if, else if chain for calculator functions 
      if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1) 
       { 
        if(counter === 4) 
         { 
          breakTimeClock = breakTimeClock.slice(0,counter-1) + input; 
         } 
        if(counter === 3) 
         { 
          breakTimeClock = "00:" + input + breakTimeClock.slice(4); 
         } 
        if(counter === 1) 
         { 
          breakTimeClock = "0" + input + breakTimeClock.slice(2); 
         } 
        if(counter === 0) 
         { 
          breakTimeClock = input + breakTimeClock.slice(1); 
         } 
        counter--; 
        if(counter === 2) 
         { 
          counter--; 
         } 
       } 
      else if(input === "X") 
       { 
        if(counter === 3) 
         { 
          breakTimeClock = "00:0" + breakTimeClock.slice(4); 
         } 
        else if(counter === 1) 
         { 
          breakTimeClock = "00:" + breakTimeClock.slice(3); 
         } 
        else if(counter === 0) 
         { 
          breakTimeClock = "0" + breakTimeClock.slice(1); 
         } 
       } 
      else if(input === "Enter") 
       { 
        return; 
       } 
      $(".break-time-clock").text(breakTimeClock); 
     }); 
    }); 

Answer 1

Прилагаемый код не совпадает с jsfiddle. Я буду относиться к jsfiddle:

У вас есть этот код:

$("button").click(function(){ 
 
     if(input === "Start") 
 
      { 
 
       // start clock code 
 
      } 
 
     else if(input === "Pause") 
 
      { 
 
       // pause clock code 
 
      } 
 
     else if(input === "Reset") 
 
      { 
 
       sessionTimeClock = "00:00"; 
 
       breakTimeClock = "00:00"; 
 
      } 
 
     return true; 
 
    });

Это первый раз, когда вы назначить обработчик щелчка на «кнопку», и поэтому он вызывается первым.

Переменная «input» не определена, поэтому другие обработчики не вызываются. (Вы можете увидеть ошибку в консоли Dev Tools).