Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]event listener
Forum PHP.pl > Forum > Przedszkole
atom90
8.07.2014, 07:21:31
document.getElementsByClassName('aktywny').addEventListener("keydown", function() {obiekt1.setStopTime();obiekt1.go2();});

chciałbym nasluchiwać element który ma klase aktywny, ale nie moge sie odwolac w taki sposob co jest nie tak ?
Sephirus
8.07.2014, 07:28:08
Bo to nie jQuery...

Nie zadziała Ci konstrukcja przypisywania eventhandlera pod tablicę - musisz wydobyć wszystkie elementy z tą klasą do jakiejś tablicy i dla każdego elementu (w pętli) przypisać handler.

atom90
8.07.2014, 07:34:22
Kod
function removeclass()
{
     document.getElementById("one").classList.remove("aktywny");
      document.getElementById("two").classList.remove("aktywny");
       document.getElementById("three").classList.remove("aktywny");
        document.getElementById("four").classList.remove("aktywny");
}

    function click1()
    {
        removeclass();
        document.getElementById("one").classList.add("aktywny");
        document.getElementsByClassName('aktywny').addEventListener("keydown",  function() {obiekt1.setStopTime();obiekt1.go2();});
    }
    
        function click2()
    {
        removeclass();
        document.getElementById("two").classList.add("aktywny");
    }
      
        function click3()
    {
        removeclass();
        document.getElementById("three").classList.add("aktywny");
    }
      
        function click4()
    {
        removeclass();
        document.getElementById("four").classList.add("aktywny");
    }
           // document.getElementsByClassName("aktywny").addEventListener("keydown",  function() {obiekt1.setStopTime();obiekt1.go2();});
            document.getElementById("one").addEventListener("click",  function() {click1();});
            document.getElementById("two").addEventListener("click",  function() {click2();});
            document.getElementById("three").addEventListener("click",  function() {click3();});  
            document.getElementById("four").addEventListener("click",  function() {click4();});  
            
            
            document.getElementById("one").addEventListener("mousemove",  function() {obiekt1.setStopTime();obiekt1.go2();});
            document.getElementById("two").addEventListener("mousemove",  function() {obiekt2.setStopTime();obiekt2.go2();});
            document.getElementById("three").addEventListener("mousemove",  function() {obiekt3.setStopTime();obiekt3.go2();});
            document.getElementById("four").addEventListener("mousemove",  function() {obiekt4.setStopTime();obiekt4.go2();});



tak to wyglada w sensie jak klikne jakis div to usuwa w innych clase aktywny i wstawia w kliknietym, a wiec klasa "aktywny" znajduje sie tylko w 1 divie
kamil4u
8.07.2014, 10:44:04
Dostałeś odpowiedź co poprawić.

To:
Kod
document.getElementsByClassName('aktywny').addEventListener("keydown",  function() {obiekt1.setStopTime();obiekt1.go2();});

a dokładnie to:
Kod
document.getElementsByClassName('aktywny')

Zwraca Ci tablice elementów o class = aktywny

Musisz zatem zrobić po tych wszystkich elementach pętlę:
Kod
zmienna = document.getElementsByClassName('aktywny')
PĘTLA po elementach "zmienna"{
zmienna[ wybrany element ].addEventListener("keydown",  function() {obiekt1.setStopTime();obiekt1.go2();});
}
atom90
8.07.2014, 10:56:06
Cały kod:
Kod
window.onload=function(){




// id_z jest to id zegara do którego się odnosimy
function obiekt(id_z, id_div)


{
            var millis = 0;
            var sec = 0;
            var stopTime=0;
            var totalTime =0;
            var temp = 0;
            var startTime=0;
            var work = false;
            var self=this;

this.go2= function()
{
            if (work == true ) return;
      
            work = true;
            document.getElementById(id_z).style.color="red";
            var currentTime = (new Date()).getTime();
            startTime = currentTime;
            
            var counter = setInterval(function() {
          if(currentTime >= stopTime)
          {
          document.getElementById(id_z).style.color="black";
                clearInterval(counter);
                totalTime+= stopTime - startTime;
                work = false;
                setValue(totalTime);
               return;
          }
                 temp = currentTime - startTime;
                 setValue(temp+totalTime);
                currentTime = (new Date()).getTime();
                
            }, 1);
            
}
function setValue(value)
{
                millis = value % 1000;
                value = Math.floor( value / 1000);
                sec = value % 60;
               value = Math.floor( value / 60 );

             if(value<10) {
               value="0" + value;
              }

               if(sec<10) {
               sec="0"+sec;
               }

                if(millis<100) {
               millis="0"+millis;
               }
              
               document.getElementById(id_z).innerHTML = value + ":" + sec +":" + millis;
  
}

this.setStopTime= function()
{
    stopTime = (new Date()).getTime() + 3000;
}

  function click()
    {

        document.getElementById(id_div).classList.add("aktywny");
        

    }
    
     function removeclass()
{
       document.getElementById("one").classList.remove("aktywny");
       document.getElementById("two").classList.remove("aktywny");
       document.getElementById("three").classList.remove("aktywny");
       document.getElementById("four").classList.remove("aktywny");
}

        document.getElementById(id_div).addEventListener("mousemove",  function() {self.setStopTime();self.go2();});
        document.getElementById(id_div).addEventListener("click",  function() {removeclass(); click();});
/*      
       var  zmienna = document.getElementsByClassName('aktywny');
        for(var i=0; i<3; i++)
        {
       zmienna[i].addEventListener("keydown",  function() {self.setStopTime();self.go2();});
        }
   */    
//if($(id_div).is('.aktywnty')){
//document.addEventListener("keydown",  function() {self.setStopTime();self.go2();});
//      }
//document.getElementById(id_div).hasClass('aktywny').addEventListener("keydown",  function() {self.setStopTime();self.go2();});
  //   document.getElementsByClassName('aktywny')[0].addEventListener("keydown",  function() {obiekt1.setStopTime();obiekt1.go2();});
}

                var obiekt1=new obiekt("zegar1", "one");
                var obiekt2=new obiekt("zegar2", "two");
                var obiekt3=new obiekt("zegar3", "three");
                var obiekt4=new obiekt("zegar4", "four");  
          
}
function show(){
alert(zm)
}



Nie mam pojecia jak to rozwiązać kod troche juz poprawiłem myszka zdazenia wyzwalaja sie po najechaniu na obszar diva, stan aktywny classy robi sie po kliknieciu diva. Potrzebuje tylko sprawdzic czy dany div ma klase aktywny. probowałem tą petlą ale chyba cos nie rozumiem. Wykomentowana juz jest ta petla

Edit

Kod
document.getElementById(id_div).addEventListener("keydown",  function() {self.setStopTime();self.go2();});

        document.getElementById(id_div).addEventListener("click",  function() {removeclass(); click();});


gdy ustawiłem na tych divach tabindex="0" działa ta linia

Kod
document.getElementById(id_div).addEventListener("keydown",  function() {self.setStopTime();self.go2();});


a aktywną klase wykorzytuje tylko po to by zrobic ramke i bylo wiadomo w jakim jestem divie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.