Reduce Javascript function length

Question

I have a javascript function that looks like that:

function myfun(){
//product.1
var t1=document.getElementById('1').innerHTML;
var link = document.getElementsByClassName(t1);

if(document.getElementsByClassName(t1).length==1){
document.getElementById(t1).innerHTML=link[0].outerHTML;
document.getElementById(t1).getElementsByTagName('a')[0].className='dsad';

}
if(document.getElementsByClassName(t1).length==2){
document.getElementById(t1).innerHTML=link[0].outerHTML+'; '+link[1].outerHTML;
var element = document.getElementById(t1).getElementsByTagName('a')[0].className='dsad';
var element2 = document.getElementById(t1).getElementsByTagName('a')[1].className='dsad';
}...
//product.2
var t2=document.getElementById('2').innerHTML;

It goes like that till if(document.getElementsByClassName(t1).length==10) and then it continues element - document.getElementById('2') and so on until it reach Element number 10. The whole script is about 700 lines and I want to reduce it somehow. I was thinking of a for loop but I don't see how I could implement this. Any suggestions?

What about passing the element's id attribute to a function and then calling that function over and over within a loop? — Lix
– Lix, Commented Apr 10, 2014 at 14:00
I don't usually link to W3Schools, but the example they use for a for loop is exactly what you're looking for. w3schools.com/js/js_loop_for.asp — Charlie G
– Charlie G, Commented Apr 10, 2014 at 14:03
In addition to what you already show us, it would be good to have an idea of the HTML structure you have. Maybe there's even a simple way to select things. By the way, once you have done var link = document.getElementsByClassName(t1); , you can then refer to that element using the variable name link , so in the next line you can write : if(link.length==1){ — Laurent S.
– Laurent S., Commented Apr 10, 2014 at 14:04

laaposto · Accepted Answer · 2014-04-10 14:08:09Z

5

Try:

for( i = 1; i <= 10; i++ ){  
  if( document.getElementsByClassName( t1 ).length == i ){
    document.getElementById( t1 ).innerHTML=link[i-1].outerHTML;
    document.getElementById( t1 ).getElementsByTagName( 'a' )[ i-1 ].className = 'dsad';
  }
}

EDIT:

If you want also the element id to be increased you should try:

for( i = 1; i <= 10; i++ ){  

var t1=document.getElementById(''+i).innerHTML;
var link = document.getElementsByClassName(t1);

      if( document.getElementsByClassName( t1 ).length == i ){
        document.getElementById( t1 ).innerHTML=link[i-1].outerHTML;
        document.getElementById( t1 ).getElementsByTagName( 'a' )[ i-1 ].className = 'dsad';
      }
    }

edited Apr 10, 2014 at 14:08

answered Apr 10, 2014 at 14:00

laaposto

12.2k15 gold badges60 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user986959 Over a year ago

the ElementID, t1 in this case, should also increase

Charlie G Over a year ago

@user986959 So increment it

Batu.Khan Over a year ago

u need 2 loops one nested inside another. One for ids, two for lengths

collapsar Over a year ago

@user986959 do you have multiple elements carrying the same id ? try to avoid that. and you might be interested in using jquery, a cross-browser js library abstracting away from many browser and dom idiosyncrasies while providing useful additional apis.

mvw Over a year ago

If you put the repeating document.getElementById(t1) into a variable, like var el = document.getElementById(t1); and use it subsequently, you get it even smaller.

|

DankMemes · Accepted Answer · 2014-04-10 14:05:37Z

3

You could try this:

for(var id=1;id<=10;id++){
    var t1id=""+id;
    var t1=document.getElementById(t1id).innerHTML;
    var link = document.getElementsByClassName(t1);
    for(var num=1;num<=10;num++){
        if(document.getElementsByClassName(t1).length==num){
             document.getElementById(t1).innerHTML=link[0].outerHTML;
             document.getElementById(t1).getElementsByTagName('a')[0].className='dsad';
        }
    }
}

answered Apr 10, 2014 at 14:05

DankMemes

2,1372 gold badges21 silver badges30 bronze badges

1 Comment

Liam Over a year ago

You shouldn't need the var t1id=""+id; line, but this is the actual (not answering as quickly as possible) answer

Ray_Poly · Accepted Answer · 2014-04-10 14:08:24Z

3

function myfun(){
    for(i=1;i<=10;i++){
        var ti=document.getElementById(i).innerHTML;
        var link = document.getElementsByClassName("t" + i);

        if(link.length==1){
             link.innerHTML=link[0].outerHTML;
             ti.getElementsByTagName('a')[i - 1].className='dsad';

        }
        else if(link.length==2){
            ti.innerHTML=link[i - 1].outerHTML+'; '+link[i].outerHTML;
            var element = ti.getElementsByTagName('a')[i - 1].className='dsad';
            var element2 = ti.getElementsByTagName('a')[i].className='dsad';
        }
     }
}

answered Apr 10, 2014 at 14:08

Ray_Poly

1711 silver badge7 bronze badges

2 Comments

Liam Over a year ago

Could do with some vague explanation?

Ray_Poly Over a year ago

well I thnk that what he is trying to do is finding out if there are only one or more than one elements with a single class name, I think that this function is clear enough to point him/her in the right direction

Fmrubio · Accepted Answer · 2014-04-10 14:24:58Z

I am not sure about one part of your code. So I am going to assume that is different depending on the id.

The first I would do is to create a javascript object with the content that you want to include for your className

var classNameDictionary = { 0 : 'dsad', 1 :'dsad, ...};

Once you have this, then I will implement a for loop as following:

function myFun(numElements){
    for(var i = 0; i < numElements; i++) {
        var t = document.getElementById(''+i).innerHTML;
        var link = document.getElementsByClassName(t);
        document.getElementById(t).innerHTML = "";
        for(var j = 0; j < link.length; j++) {
            document.getElementById(t).innerHTML +=link[j].outerHTML;
            var element = document.getElementById(t).getElementsByTagName('a')[j].className = classNameDictionary[j];
        }

    }
}

I hope it helps

Collectives™ on Stack Overflow

Reduce Javascript function length

4 Answers 4

8 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related