У меня есть этот div.
<div id="parentTree"></div>
И чтобы заполнить div я вызываю функцию при загрузке страницы.
<body onload='populateMenu()'>
Тогда
function populateMenu(){
var parent = document.getElementById('parentTree');
var mystring = "";
var num=3;
for(var i=0; i<num; i++){
mystring+="<div class='col1' onclick='populateMenu2(this)'>col1<div id='col1"+i+"'></div></div>";
}
parent.innerHTML = mystring;
}
Функция работает нормально и показывает три строки, подобные этой
Result:
col1
col1
col1
При нажатии на любую из них запускается вторая функция:
function populateMenu2(element){
var holder = element.children[0];
if(holder.innerHTML == ""){
var mystring = "";
var num=3;
for(var i=0; i<num; i++){
mystring+="<div class='col2' onclick='populateMenu3(this)'>col2<div id='col2"+i+"' ></div></div>";
}
holder.innerHTML = mystring;
}
else holder.innerHTML = "";
}
Эта функция расширяет строку и добавляет еще три строки, как и ожидалось
Result:
col1
col2
col2
col2
col1
col1
Но когда я нажимаю на этот col2, третья функция, похоже, не работает.
function populateMenu3(element){
var holder = element.children[0];
if(holder.innerHTML == ""){
var mystring = "";
var num=3;
for(var i=0; i<num; i++){
mystring+="<div class='col3' >col3<div id='col3"+i+"' ></div></div>";
}
holder.innerHTML = mystring;
}
else holder.innerHTML = "";
//alert(ol_holder.id);
}
Я хочу этого.
Result:
col1
col2
col3
col3
col3
col2
col2
col1
col1
Но этого никогда не происходит. Что не так с моим кодом?
PS: я использую простой CSS для отступа кода:
<style>
.col2{margin-left:10px;}
.col3{margin-left:20px;}
</style>