Почему программа не перебирает массив? Menu.length равен 4, но цикл for повторяется только один раз! Это мой первый пост в переполнении стека. Извините, если это так вопиюще!

var menu=["Electrical calulator","Light Calulator","Finance Calculator","temperature calculator"];


console.log(menu.length);
for(var i=0;i<menu.length;i++)
{
	console.log(i);
	var li=document.createElement("li");

	var a=document.createElement("a");
	var i=document.createElement("i");
	i.className = "icon mdi mdi-home";
	var span=document.createElement("span");
	console.log(menu[i]);
	span.innerHTML=menu[i];
	a.appendChild(i);
	a.appendChild(span);
	li.appendChild(a);
	document.getElementById('menu_bar').appendChild(li);
}
<div id="menu_bar"></div>
0
Bharadwaj 3 Мар 2018 в 10:25

4 ответа

Лучший ответ

Вы переопределяете переменную i здесь:

var i=document.createElement("i");
2
Anthony L 3 Мар 2018 в 07:28

Попробуй это. Вам просто нужно изменить переменную цикла, потому что это конфликт с другими я.

var menu=["Electrical calulator","Light Calulator","Finance Calculator","temperature calculator"];


console.log(menu.length);
for(var j=0;j<menu.length;j++)
{
    console.log(j);
    var li=document.createElement("li");
    var a=document.createElement("a");
    var i=document.createElement("i");

    i.className = "icon mdi mdi-home";
  var span=document.createElement("span");
    console.log(menu[j]);
    span.innerHTML=menu[j];
    a.appendChild(i);
    a.appendChild(span);
    li.appendChild(a);
    document.getElementById('menu_bar').appendChild(li);
}
1
Suraj Rao 3 Мар 2018 в 10:38

Помимо двойного использования i, теперь j, вам нужно добавить узлы в правильном порядке, чтобы получить <ul> с нужными дочерними элементами <li>.

<ul id="menu_bar">
    <li><a href="#"><i class="icon mdi mdi-home"><span>Electrical calulator</span></i></a></li>
    <li><a href="#"><i class="icon mdi mdi-home"><span>Light Calulator</span></i></a></li>
    <li><a href="#"><i class="icon mdi mdi-home"><span>Finance Calculator</span></i></a></li>
    <li><a href="#"><i class="icon mdi mdi-home"><span>temperature calculator</span></i></a></li>
</ul>
var menu = ["Electrical calulator", "Light Calulator", "Finance Calculator", "temperature calculator"],
    j,
    li, a, i, span;

for (j = 0; j < menu.length; j++) {
    li = document.createElement("li");

    a = document.createElement("a");
    a.href= '#';
    i = document.createElement("i");
    span = document.createElement("span");

    i.className = "icon mdi mdi-home";

    span.innerHTML = menu[j];
    i.appendChild(span);
    a.appendChild(i);
    li.appendChild(a);
    document.getElementById('menu_bar').appendChild(li);
}
<ul id="menu_bar"></ul>
0
Nina Scholz 3 Мар 2018 в 07:37

Вы используете var i для итерации и создания элемента var i. Измените итерацию i на индекс.

0
radhey shyam 3 Мар 2018 в 07:31