www.webdeveloper.com
Results 1 to 14 of 14

Thread: loop function for different IDs

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    8

    loop function for different IDs

    Hello guys,


    I'm trying to figure out, how I could loop a function for different php generated IDs.
    This is the function:
    Code:
    function doFirst(){ 
      maxBarSize=255; 
    	
      myAudio=document.getElementById('myAudio'); 
      playButton=document.getElementById('playButton'); 
      bar=document.getElementById('defaultBar');
      progressBar=document.getElementById('progressBar');
      
    
      playButton.addEventListener('click', playOrPause, false); 
      defaultBar.addEventListener('click', clickedBar, false);
    }
    function playOrPause(){
      if(!myAudio.paused && !myAudio.ended) {
        myAudio.pause();
        playButton.innerHTML='Play'; 
        progressBar.style.WebkitAnimation= 'move 0s linear infinite'; 
        playButton.style.color='#222'; 
        window.clearInterval(updateBar);
      }else{
        myAudio.play();
        playButton.innerHTML='Pause';
        playButton.style.background= 'url("images/pause.jpg") 0 0 no-repeat'; 
        playButton.style.color='#eee'; 
        updateBar=setInterval(update, 500);
      }
    }
    function update(){
      if(!myAudio.ended){ /*if playing*/
        var size=parseInt(myAudio.currentTime*maxBarSize/myAudio.duration); 
        progressBar.style.width=size+'px'; /*change width in CSS*/
      }else{
        progressBar.style.width='0px';
        playButton.innerHTML='Play';
        window.clearInterval(updateBar); 
      }
    }
    function clickedBar(e){ 
      if(!myAudio.paused && !myAudio.ended){ /*while playing*/
        var mouseX=e.pageX-bar.offsetLeft; 
        var newtime=mouseX*myAudio.duration/maxBarSize;
        myAudio.currentTime=newtime; 
        progressBar.style.width=mouseX+'px';
      }
    }
    window.addEventListener('load', doFirst, false);
    Now I need the function to run for myAudio1, playButton1, defaultBar1, progressBar1 and then for myAudio2, playButton2, defaultBar2, progressBar2 etc. up to maybe 300. This function itself is working properly but only for the first one. And please note that I'm coding this as a test for myself, and I've only tested it in Chrome.

    I tried using things like:
    Code:
    var i = 0;
    
    while(i < 100){
    	document.getElementById("myAudio = " + i);
    	i++;
    }
    If someone could help me, I would be really happy.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,082
    did you try:
    Code:
    document.getElementById("myAudio" + i);
    ?

  3. #3
    Join Date
    Apr 2012
    Posts
    8
    It doesn't work if I try this:

    Code:
    myAudio=document.getElementById('myAudio'+i); /*the video*/
      playButton=document.getElementById('playButton'+i); 
      bar=document.getElementById('defaultBar'+i);
      progressBar=document.getElementById('progressBar'+i);

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    document.getElementById("myAudio" + i);

    damn i'm late lol
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Apr 2012
    Posts
    8
    Sorry, that was a typing error...
    But if I write something like:
    Code:
    myAudio=document.getElementById('myAudio'+i); /*the video*/
      playButton=document.getElementById('playButton'+i); 
      bar=document.getElementById('defaultBar'+i);
      progressBar=document.getElementById('progressBar'+i);
    it doesn't work.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,082
    no, because your loop will keep overwriting the playButton variable. you need to attach the listeners directly to the elements:

    Code:
    document.getElementById('playButton'+i).addEventListener('click', playOrPause, false);
    //etc
    although I would be careful with cross-browser support for addEventListener

  7. #7
    Join Date
    Apr 2012
    Posts
    8
    That makes sense. I tried it. It's still not working.
    Code:
    var i = 0;
    
    while(i < 100){
    	i++;
    
    function doFirst(){
      maxBarSize=255;
      document.getElementById('playButton'+i).addEventListener('click', playOrPause, false);
      document.getElementById('defaultBar'+i).addEventListener('click', clickedBar, false);
    }
    function playOrPause(){
      if(!document.getElementById('myAudio'+i).paused && !document.getElementById('myAudio'+i).ended) {
        document.getElementById('myAudio'+i).pause();
        document.getElementById('playButton'+i).innerHTML='Play';
        document.getElementById('playButton'+i).style.background= 'url("images/play.jpg") 0 0 no-repeat';
        document.getElementById('progressBar'+i).style.WebkitAnimation= 'move 0s linear infinite';
        window.clearInterval(updateBar);
      }else{
        myAudio.play();
        document.getElementById('playButton'+i).innerHTML='Pause';
        document.getElementById('playButton'+i).style.background= 'url("images/pause.jpg") 0 0 no-repeat';
        document.getElementById('progressBar'+i).style.WebkitAnimation= 'move 12s linear infinite';
        updateBar=setInterval(update, 500);
      }
    }
    function update(){
      if(!document.getElementById('myAudio'+i).ended){
        var size=parseInt(document.getElementById('myAudio'+i).currentTime*maxBarSize/document.getElementById('myAudio'+i).duration);
        document.getElementById('progressBar'+i).style.width=size+'px';
      }else{
        document.getElementById('progressBar'+i).style.width='0px';
        document.getElementById('playButton'+i).innerHTML='Play';
        window.clearInterval(updateBar);
      }
    }
    function clickedBar(e){
      if(!document.getElementById('myAudio'+i).paused && !document.getElementById('myAudio'+i).ended){
        var mouseX=e.pageX-document.getElementById('defaultBar'+i).offsetLeft;
        var newtime=mouseX*document.getElementById('myAudio'+i).duration/maxBarSize;
        document.getElementById('myAudio'+i).currentTime=newtime;
        document.getElementById('progressBar'+i).style.width=mouseX+'px';
      }
    }
    window.addEventListener('load', doFirst, false); /*call "doFirst" as soon as website loads*/
    
    }
    And i get this error: Uncaught TypeError: Cannot call method 'addEventListener' of null
    Last edited by bandmaster3; 04-25-2012 at 03:15 PM.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,082
    hard to say without seeing your html. but do you have a button with an id playButton0?

    because 0 is where your loop starts...

  9. #9
    Join Date
    Apr 2012
    Posts
    8
    No actually, the IDs generated by the PHP are between 40 and 60.

  10. #10
    Join Date
    Nov 2010
    Posts
    1,082
    well wouldn't it make more sense for you loop to be something like:
    Code:
    var i = 40;
    
    while(i < 61){
    	i++;
    ?

  11. #11
    Join Date
    Apr 2012
    Posts
    8
    Well it definitely would, but if I delete an item, lets say 56, it would still have gaps.

  12. #12
    Join Date
    Nov 2010
    Posts
    1,082
    I guess in that case you would want to put in some sort of test to see if an element exists...

    Code:
    var i = 40;
    
    while(i < 61){
    	i++;
    if (document.getElementById('playButton'+i)){
    //etc
    }
    seems like an odd way to be doing things, though...

  13. #13
    Join Date
    Apr 2012
    Posts
    8
    Well if I do it like this, the function applies to the player with an id of myAudio48 etc.

    Code:
    var i = 47;
    
    while(i < 48){
    	i++;
    ...
    }

  14. #14
    Join Date
    Apr 2012
    Posts
    8
    Well, I think it would be easier for me to use the jPlayer instead and customize it for my needs. Thank you for your answers nonetheless.

    Best Regards,
    Bandmaster3

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles