Reputation: 77
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
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
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
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