Форум Сайтостроение Веб-строительство

Где ошибка в JS?

D
На сайте с 28.06.2008
Offline
1104
Dram
145

Учу JS, задача заменить теги на странице. Набросал абзацев

<input id="input" type="submit" value="Жми" placeholder="" >
<p>
    Это оычный текст
</p>
<p>
    Это оычный  zdffsd  текст
</p>
<p>
    Это оычный ывыЫВА текст
</p>
<p>
    ыаыавыфа  ный текст
</p>
<p>
    Это Spam
</p>
<p>
    ЭтФАфм 56456456456ст
</p>
<p>
    Этыаыф  ыфафывафыва  dsdfsdfsf
</p>

Далее написал код

<script>
    "use strict";

    let input = document.getElementById('input');
    let p = document.getElementsByTagName('p');

    input.onclick = function () {

      for (let i=0;i<p.length;i++){
          console.log(p[i]);
          p[i].outerHTML = '<span>' + p[i].innerHTML + '</span>'
      }
    };


</script>

Теперь не могу понять почему он меняет не все абзацы, а через одного?

IS
На сайте с 16.08.2006
Offline
158
Igor-san
#1
Dram :

Учу JS, задача заменить теги на странице. Набросал абзацев

Далее написал код

Теперь не могу понять почему он меняет не все абзацы, а через одного?

Я тоже плохо знаю джаваскрипт, но видимо изменения сразу же применяются и массив P каждый раз меняется. Если сделать так то вроде работает

input.onclick = function () {
    var inputList = Array.prototype.slice.call(p);
	inputList.forEach((child) => { child.outerHTML = '<span>' + child.innerHTML + '</span>'});
    };
ArbNet
На сайте с 27.10.2019
Offline
129
ArbNet
#2

Бежать от таких учителей надо, кто вам такие задания даёт 🤾

Вот замечательный учебник, с понятным описанием и примерами https://learn.javascript.ru

Современный учебник JavaScript
Современный учебник JavaScript
  • learn.javascript.ru
Современный учебник JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.
Собираю команду для совместной работы, так же можете там понаблюдать как я работаю и пообщаться со мной ;) https://discord.gg/CmckMR3jg2
-S
На сайте с 10.12.2006
Offline
1355
-= Serafim =-
#3
ArbNet #:

Бежать от таких учителей надо, кто вам такие задания даёт 🤾

Вот замечательный учебник, с понятным описанием и примерами https://learn.javascript.ru

Ты думаешь ТС о нем не знает? :D

S
На сайте с 13.10.2014
Offline
171
silicoid
#4

цитата из документации:
Element.getElementsByTagName() метод возвращает живой список, который автоматически обновляется при изменении DOM. 

соответственно, когда вы обновляете ДОМ, содержимое объекта обновляется и цикл уже работает некорректно.

пользуйте  querySelectorAll и будет вам счастье.
let p = document.querySelectorAll('p');

либо используйте методику "ректальной костылезации" :
p[0].outerHTML = '<span>' + p[0].innerHTML + '</span>';

Отвечу на ваши вопросы Получите контент для Вашего Google позволил вебмастерам настраивать

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий