CODEWITHSUNDEEP
javascript
George Ristic
George Ristic

Reputation: 77

How to make this code more reusable

I am trying to find the best way of making this code reusable.

I need, instead of "Aa0" in function and variables names, to also be able to have Aa1, Aa2, Ab0... (40 times)

I know I could just copy-paste and change those letters (and repeat the process 40 times), but this is definitely not the cleaner approach.

Is there a way to make every instance of "Aa0" some kind of variable that can hold multiple values?

function mov_Aa0() {
    var div_bor_Aa0 = document.getElementsByClassName("bor_Aa0");

    for (var div_bor_Aa0_i = 0; div_bor_Aa0_i < div_bor_Aa0.length; div_bor_Aa0_i++) {
        div_bor_Aa0[div_bor_Aa0_i].style.borderColor = "#FFF";
    }

    var div_txt_box_Aa0 = document.getElementById("txt_box_Aa0");
    var par_txt_Aa0 = '<p class="txt">main title</p><br /><p class="txt">sub title</p>';
    div_txt_box_Aa0.innerHTML = par_txt_Aa0;
    var par_key_Aa0 = '<p class="txt g">some text</p><br /><p class="txt o">not</p><p class="txt g">important</p>';
    div_key_box_Dd1.innerHTML = par_key_Aa0;
    div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_Aa0.png)";
}

var div_con_box_Aa0 = document.getElementById("con_box_Aa0");

div_con_box_Aa0.onmouseover = mov_Aa0;

I hope the explanation is clear enough. Thank you in advance.

Upvotes: 0

Views: 83

Answers (3)

Dalorzo
Dalorzo

Reputation: 20024

Here are a few recommendations on my part:

div_bor[div_bor_i].style.borderColor = "#FFF";

Looks like it could be transformed to css hover, since the event as your described it is mouse event:

.AaSomething:hover {
      border-color:#ffffff;
 }

This same principle applies for div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_Aa0.png)"; which could also use the hover css instead of writing code for it.

These sections in your code seems to be constants, for example: div_key_box_Dd1 is being assigned a value that never changes:

 var par_txt_Aa = '<p class="txt">main title</p><br /><p class="txt">sub title</p>';
 var par_key_Aa = '<p class="txt g">some text</p><br /><p class="txt o">not</p><p class="txt g">important</p>';
 div_key_box_Dd1.innerHTML = par_key_Aa;

And if you do all that I think there is not need for this function to exists.

Upvotes: 0

Sunand
Sunand

Reputation: 723

write a function which takes and argument which keeps changing for each element and assign the hover function to each element with different arguments. 

function mov(x){
    var div_bor = document.getElementsByClassName("bor_"+x);
    for (var div_bor_i = 0; div_bor_i < div_bor.length; div_bor_i ++){
        div_bor[div_bor_i].style.borderColor = "#FFF";
    };
    var div_txt_box = document.getElementById("txt_box_"+x);
    var par_txt = '<p class="txt">main title</p><br /><p class="txt">sub title</p>';
    div_txt_box.innerHTML = par_txt;
    var par_key = '<p class="txt g">some text</p><br /><p class="txt o">not</p><p class="txt g">important</p>';
    div_key_box_Dd1.innerHTML = par_key;
    div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_"+x+".png)";
}

var div_con_box_Aa0 = document.getElementById("con_box_Aa0");
div_con_box_Aa0.onmouseover = function(){ 
    mov('Aa0');
}

I suggest u can add and attribute to the element which keeps changing and access that attribute dynamically in the handler.

Upvotes: 1

SammarZ
SammarZ

Reputation: 11

Could you use a 2D array to store these values? Specifically, you could use array[n] for storing all the elements with suffix n.

Upvotes: 0

Related Questions