ЙажаСценарий / Говнокод #27763 Ссылка на оригинал

0

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
let textarea = document.querySelector('textarea')
let list = document.querySelector('ol')
let newTask = document.createElement('li')
newTask.innerText = textarea.value

function submitTask() {
    list.appendChild(newTask)
}

При попытке добавлять новый HTML элемент функция добавления срабатывает только один раз, к тому же для добавления используется не то значение которое я ввожу в текстовое поле, а только дефолтное. Так как я перепробовал уже массу вариантов и с инпутом, и с событием нажатия Enter, какие-то варианты, которые уже забыл, я подозреваю, что проблема, вероятно, в appendChild, но не уверен, и не понимаю её.

Запостил: shuric shuric, (Updated )

Комментарии (9) RSS

  • ava Kozel # Ссылка на оригинал 0

    https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
    > If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position
    appendChild честно отрабатывает каждый раз, а вот код, находящийся вне функции - только один раз, и не тогда, когда хочется пользователю в соответствии с его представлениями о чудесах и магии, а когда интерпретатор до него дойдёт.

    Итак, смотрим, что делает приведённый код при его запуске (не раньше и не позже) (*):
    1) Определяет функцию submitTask, при вызове которой (не раньше и не позже) у объекта в переменной list вызовется метод appendChild со значением переменной newTask в качестве аргумента. Почему этот пункт идёт первым в списке, хотя функция определяется в конце кода? Потому что это JavaScript, идите нахер с такими вопросами.
    2) Ищет первый попавшийся элемент по селектору 'textarea' и запоминает его в переменной textarea.
    3) Ищет первый попавшийся элемент по селектору 'ol' и запоминает его в переменной list.
    4) Создаёт элемент типа 'li' и запоминает его в переменной newTask. Ключевой момент: см. (*)
    5) Берёт текст, написанный в textarea, и вписывает его во внутренности newTask. Ключевой момент: см. (*)

    Ну а когда-нибудь потом мы вызываем функцию submitTask, которая помещает когда-то давно созданный элемент, хранящийся в newTask, внутрь когда-то давно найденного элемента, хранящегося в list.
    Ответить

    • ava shuric # Ссылка на оригинал 0 ⇈

      То есть, правильно ли я понял, что у меня переменные создаются при парсинге всего, и когда я вызываю, не важно как, функцию, она берёт данные, сохранённые в переменные именно в этот момент. А значит мне нужно как-то переосмыслить функцию, что бы данные брались "по факту"? Хм, осталось понять как именно. Но уже спасибо большое!
      Ответить

      • ava bormand # Ссылка на оригинал 0 ⇈

        Втащить все это в функцию, наверное...

        Ну и искать элементы по id, а не по типу. Иначе всё сломается если добавить ещё одно поле ввода или список.
        Ответить

        • ava shuric # Ссылка на оригинал 0 ⇈

          то что я ищу прям по тегам, это исключительно потому что у меня простейшая история ) Осознание того, что нужны более конкретные селекторы, к счастью, доступны даже моему птичьему мозгу XD Втаскивание в функцию помогор! Хоспаде, такая тупая ошибка. Я же знаю что нельзя лишнего создавать в глобальной области, конкретные действия должны быть в области видимости конкретной функйии, амагадбл!
          Ответить

      • ava Kozel # Ссылка на оригинал 0 ⇈

        Каждая строка кода берёт данные, хранящиеся в переменных и прочих источниках данных на момент выполнения этой строки.
        let lastFunc = 'вам там норм?';
function a() {
    lastFunc = 'a';
}
function b() {
    lastFunc = 'b';
}
function print() {
    console.log('Last called function:', lastFunc);
    lastFunc = 'print';
}

        Здесь при вызове print() выпишется текст в зависимости от того, какая функция была вызвана последней перед этим.

        Проблема изначального кода была в том, что все сохранения, создания и заполнения текстом происходили в самом начале, а при вызове функции - только втыкание одного элемента в другой.
        Если есть уверенность, что конкретные элементы, хранящиеся в textarea и list, всегда будут в документе - достаточно внести в функцию создание и заполнение <li>. Если нет - нужно вносить всё.

        И да, если есть планы работать над более-менее сложными проектами, эту тему (какой код когда выполняется) нужно освоить максимально надёжно. Наверное, любой серьёзный код на JavaScript - это "едет функция через функцию".
        Ответить

  • ava shuric # Ссылка на оригинал 0

    Когда есть такие клёвые ребята как вы быть тупым становится даже чуточку менее страшно XD
    Ответить

Добавить комментарий

Я, guest, находясь в здравом уме и твердой памяти, торжественно заявляю:

    А не использовать ли нам bbcode?

    ↑
    8
    ↓