1. JavaScript / Говнокод #27763

    +1

    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, 22 Октября 2021

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

    • ava Kozel 22.10.2021 10:02 # +5

      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 22.10.2021 10:27 # 0

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

        • ava bormand 22.10.2021 10:30 # +1

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

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

          • ava shuric 22.10.2021 10:37 # +1

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

        • ava Kozel 22.10.2021 11:17 # +3

          Каждая строка кода берёт данные, хранящиеся в переменных и прочих источниках данных на момент выполнения этой строки.
          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 22.10.2021 10:39 # +1

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

    • ava ObeseYoung 22.10.2021 14:01 # 0

      > let
      А с var заработало бы сразу!
      Ответить

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