Hi all i am trying to change the html of an object from an array of htmls. But i am having problem iterating properly. I managed to make it work once EDIT After a few plains about the clarity of my question I will rephrase it. I have a div panel called .trpanel and a button called #trigger2 (it is a next button). Then I have a series of divs with texts that contain translations. I want when I press the button (called next) to cycle through the translations one by one on the trpanel.

var ltranslation = [];
    ltranslation[0] = $("#translation-en-1").html();
    ltranslation[1] = $("#translation-ur-en").html();
    ltranslation[2] = $("#translation-fr-en").html();
    ltranslation[3] = $("#translation-it-en").html();
    ltranslation[4] = $("#translation-sp-en").html();
    ltranslation[5] = $("#translation-po-en").html();
    ltranslation[6] = $("#translation-fr-en").html();
    ltranslation[7] = $("#translation-de-en").html();

    var l= ltranslation;



   $("#trigger2").off('click').on('click',function(){ 
    for (var i = 0; i <= ltranslation.length; i++){ 
if (i==7){i=0;}
     $(".trpanel").html.ltranslation[i]; or ???//replace().ltranslation[]+i??? the code throws errors  
    } 
    });

I am quite new to Javascript and i am getting a bit confused with the types of objects and arrays and loops. I managed once to add the htmls but without replacing them ... so they all came one after the other. The i tried to change the code and it hasn't worked since. Any help will be greatly appreciated.

Hi all i am trying to change the html of an object from an array of htmls. But i am having problem iterating properly. I managed to make it work once EDIT After a few plains about the clarity of my question I will rephrase it. I have a div panel called .trpanel and a button called #trigger2 (it is a next button). Then I have a series of divs with texts that contain translations. I want when I press the button (called next) to cycle through the translations one by one on the trpanel.

var ltranslation = [];
    ltranslation[0] = $("#translation-en-1").html();
    ltranslation[1] = $("#translation-ur-en").html();
    ltranslation[2] = $("#translation-fr-en").html();
    ltranslation[3] = $("#translation-it-en").html();
    ltranslation[4] = $("#translation-sp-en").html();
    ltranslation[5] = $("#translation-po-en").html();
    ltranslation[6] = $("#translation-fr-en").html();
    ltranslation[7] = $("#translation-de-en").html();

    var l= ltranslation;



   $("#trigger2").off('click').on('click',function(){ 
    for (var i = 0; i <= ltranslation.length; i++){ 
if (i==7){i=0;}
     $(".trpanel").html.ltranslation[i]; or ???//replace().ltranslation[]+i??? the code throws errors  
    } 
    });

I am quite new to Javascript and i am getting a bit confused with the types of objects and arrays and loops. I managed once to add the htmls but without replacing them ... so they all came one after the other. The i tried to change the code and it hasn't worked since. Any help will be greatly appreciated.

• javascript
• jquery
• arrays
• loops

Share Improve this question Follow edited Jun 23, 2013 at 23:39 alexnode asked Jun 23, 2013 at 19:17 alexnodealexnode 11722 silver badges1414 bronze badges 2

• Using .off('click') before calling .on('click') looks useless in your example. Same goes for if (i==7){i=0;} : just change your exit condition in your loop with an exclusive parator (< instead of <=). – vcarel Commented Jun 23, 2013 at 19:28
• I use the same #trigger button to do other thing before and with the off I can unbind the previous event handlers. I am not pletely sure what Jquery does exactly there but with the off it works. – alexnode Commented Jun 23, 2013 at 23:29

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

A lot of guessing, but seems like you are trying to do this :

var trans = $('[id^="translation-"]'),
    idx   = 0;

$("#trigger2").on('click',function(){
    $(".trpanel").html( trans.eq(idx).html() );
    idx = idx > 6 ? 0 : idx+1;
});

FIDDLE

I think you are trying to do this:

if (i == 7) {
    i = 0; // I don't really know why you are doing this, but it will reset the loop
}
 $(".trpanel").html(ltranslation[i]); //I'm passing ltranslation[i] to the html method. Instead of .html.ltranslation[i].
} 

Also, without seeing any html, I'm not sure but I think you may want to iterate over .trpanel ?

Something like:

 $(".trpanel").eq(i).html(ltranslation[i]);

Another thing (so you can make your code clearer I think). You can abstract the array population in a function, like this:

var ltranslation = [];
var languages = ["en-1", "ur-en", "fr-en", "it-en", "sp-en", "po-en", "fr-en", "de-en"];

$.each(languages, function(index) {
    ltranslation[index] = $("#translation-" + this).html();
});
// Then you can use ltranslation

If you want to flip through several translations I would implement it that way:

var translations=["hej","hello", "hallo","hoy"];

var showTranslation=function(){
    var current=0;
    var len=translations.length;
    return function(){
        var direction=1;
        if (current>=len) current=0;
        $("#text").text(translations[current]);
        current+=direction;
    }
}();

$("#butt").on("click", showTranslation);

Fiddle: http://jsfiddle/Xr9fz/

Further: You should give your translations a class, so you could easily grab all of them with a single line:

$(".translation).each(function(index,value){ ltranslation.push(value); })

From the question : I managed once to add the htmls but without replacing them -

I think you want to add all of these items into $(".trpanel"). First, dont take the HTML of each element, clone the element itself :

//method ripped from Nico's answer.
var ltranslation = [];
var languages = ["en-1", "ur-en", "fr-en", "it-en", "sp-en", "po-en", "fr-en", "de-en"];

$.each(languages, function(index) {
    ltranslation[index] = $("#translation-" + this).clone();
});

Then you could append everything into the container, so add the htmls but without replacing them. append takes in an array without replacing the previous html.

$("#trigger2").off('click').on('click',function() {
    $(".trpanel").append(ltranslation);
}); 

I don't know what exactly you're tring to do, but I've put ments in your code to help you better understand what your code is doing. The net effect of your code is this (which I doubt you want) :

 $("#trigger2").off('click').on('click',function(){ 
     $(".trpanel").html(ltranslation[7]); 
});

This is your code with some ments and minor changes

   var ltranslation = [];
    ltranslation[0] = $("#translation-en-1").html();
    ltranslation[1] = $("#translation-ur-en").html();
    ltranslation[2] = $("#translation-fr-en").html();
    ltranslation[3] = $("#translation-it-en").html();
    ltranslation[4] = $("#translation-sp-en").html();
    ltranslation[5] = $("#translation-po-en").html();
    ltranslation[6] = $("#translation-fr-en").html();
    ltranslation[7] = $("#translation-de-en").html();

var l= ltranslation;



   $("#trigger2").off('click').on('click',function(){ 
    for (var i = 0; i < ltranslation.length; i++){ 
     //if (i==7){i=0;}  <-- This will cause an infinite loop won't it?  are you trying to reset i? i will reset next time loop is called,
          $(".trpanel").html(ltranslation[i]);  //<-- this will overwrite elements with class .trpanel ltranslation.length times... 
         ///you'll see only the value of translation[7] in the end
     } 
    });

EDIT

To do what you want to do based on your ments, try this:

 var ltranslation = [];
        ltranslation[0] = $("#translation-en-1").html();
        ltranslation[1] = $("#translation-ur-en").html();
        ltranslation[2] = $("#translation-fr-en").html();
        ltranslation[3] = $("#translation-it-en").html();
        ltranslation[4] = $("#translation-sp-en").html();
        ltranslation[5] = $("#translation-po-en").html();
        ltranslation[6] = $("#translation-fr-en").html();
        ltranslation[7] = $("#translation-de-en").html();
 var counter = 0;//a global counter variable
 $("#trigger2").click(function(){  //eeverytime button is clicked do this
    $(".trpanel").html(ltranslation[counter]); //set the html to an element of array
    counter++;  //increment counter
    if(counter==ltranslation.length) //reset the counter if its bigger than array len
       counter=0;

  });