для l oop не работает внутри элемента класса - PullRequest
Новая
       3

для l oop не работает внутри элемента класса

0 голосов
/ 15 апреля 2020

Мои коды должны были показать 1 2 3 4 5 6 7 8 9 10. Но он показывает только 10. в чем ошибка ?? Но она работает, когда я пишу (document.write (x);). коды приведены ниже 

    for(x=0;x<=10;x++){

        document.querySelector(".for").innerHTML=(x+"</br>");

    }

Ответы [ 3 ]

2 голосов
/ 15 апреля 2020

Вы должны добавить внутренний html и не переопределять его. В противном случае присутствует только последняя итерация. 

for(x=0;x<=10;x++){
document.querySelector(".for").innerHTML += (x+"</br>");
}
<p class="for"></p>
1 голос
/ 15 апреля 2020

Вот что в сущности делает ваш l oop: 

 //sets .for's content to  0<br>
 document.querySelector(".for").innerHTML=(0+"</br>");

 //sets .for's content to  1<br>, erasing what was there before
 document.querySelector(".for").innerHTML=(1+"</br>");

 //sets .for's content to  2<br>, erasing what was there before
 document.querySelector(".for").innerHTML=(2+"</br>");

 ...

 //sets .for's content to  9<br>, erasing what was there before
 document.querySelector(".for").innerHTML=(9+"</br>");

Каждый цикл в l oop устанавливает содержимое на что-то новое, переопределяя то, что уже было.

Если вместо этого вы хотите добавить к тому, что уже есть, вы должны сделать что-то вроде: 

for(x=0;x<=10;x++){
    document.querySelector(".for").innerHTML = document.querySelector(".for").innerHTML + ( x+"</br>"  );
}

БОНУС:

Javascript предлагает упрощенный способ к «добавлению к тому, что уже есть» с синтаксисом +=. Например: 

a = a + 1;

можно записать как: 

a += 1;

Таким же образом: 

a = a + 5;

... можно записать как: 

a += 5;

И таким же образом: 

document.querySelector(".for").innerHTML = document.querySelector(".for").innerHTML + ( x+"</br>"  );

... можно записать как: 

document.querySelector(".for").innerHTML += (x + "</br>");

Таким образом, вы можете использовать это и упростить свой код до: 

for ( x=0; x<=10; x++ ) {
    document.querySelector(".for").innerHTML += (x + "</br>");
}

И пока я на этом, небольшое повышение производительности может оказать влияние, если вы делаете большее l oop: 

const element = document.querySelector(".for");

for ( let x = 0; x <= 10; x++ ) {
    element.innerHTML += (x + "</br>");
}

Вместо запроса документ для одного и того же элемента каждый цикл l oop, вы запрашиваете его один раз и сохраняете ссылку на него перед l oop, и ссылаетесь на него в l oop.

1 голос
/ 15 апреля 2020

Вы только что пропустили добавление данных в HTML. Вместо замены innerHTML вы можете продолжать добавлять к нему внутри l oop как - 

document.querySelector(".for").innerHTML+=(x+"</br>");

Запустите приведенный ниже фрагмент кода, чтобы проверить. 

for(x=0;x<=10;x++){

        document.querySelector(".for").innerHTML+=(x+"</br>");

    }
<div class="for"></div>
...