Задать вопрос
KaizDA

Даниил Кочкин

Ответы пользователя по тегу JavaScript

  • Почему функция addTask() не работает?

    KaizDA
    @KaizDA
    Здравствуйте!
    Надеюсь, я правильно смогу объяснить почему ваша функция не работает.
    Во-первых, следует понять, что нужно сделать в функции:
    1. Получить текущее значение в input
    2. Создать разметку для нового таска, где важный элемент – текст из input
    3. Вставить новый элемент в ul. list_task и очистить input


    Если вы присмотритесь к вашему коду, найдётся несколько проблем, одна из которых, из-за чего в общем-то у вас функция не работает должным образом — это перезапись.

    Когда новый элемент добавляется, активируется функция addTask.

    1. Внутри вы получаете значение, находящееся внутри input
    2. Создаете переменную и присваиваете ей list_taskEl куда в свою очередь записываете разметку нового элемента с текстом. Таким образом, даже если вы уберёте list_taskEl.appendChild(task) всё будет работать. Но не так, как вы хотели бы.


    Возникает вопрос, что делать? Ответ таков: следует переработать код в самой функции addTask, пропуская лишь строчку, где получаете значение.

    Чтобы сразу не давать ответ, как вообще можно это решить, я оставлю вам ссылку на интересную статью, которая поможет: insertAdjacentHTML.

    Ниже под Spoiler оставлю, как я переработал ваш код. На случай, если всё же захочется посмотреть

    Spoiler
    //создание задачи по нажатию на клавишу интер
document.addEventListener('keydown', (event) => {
  if (event.code === "Enter") {
    addTask();
    clearInput();
  }
})

//функция очистки инпута
function clearInput() {
  input_taskEl = document.getElementById('input_task').value = "";
}

const templateTask = (text) => {
  return `
    <li class="task">
      <h2 class="task__title">${text}</h2>
      <div class="task__buttons">
        <button class="task__button><i class="fa fa-edit"></i></button>
        <button class="task__button><i class="fa fa-close"></i></button>
      </div>
    </li> 
  `
}

const addTask = () => {
  const input_taskEl = document.getElementById('input_task').value;

  const template = templateTask(input_taskEl);

  list_taskEl.insertAdjacentHTML('beforebegin', template);
  clearInput();
}
    Ответ написан
    2 комментария
    2 комментария

  • Объясните, как действует код и почему он работает: weirdReverse=a=>a.sort(n=>1)?

    KaizDA
    @KaizDA Автор вопроса
    Прочитал одно из возможных объяснений в обсуждении. Поскольку в английском не слишком хорош, могу сделать ошибки. По этой причине, пожалуйста, если был где-то не прав, поправьте, буду благодарен. Ссылка на то, где мной это было прочитано.

    В основе своём метод sort(), как уже понятно из названия сортирует массив элементов. При сортировке букв он используется порядок UTF-6, именно по потому он может сортировал от А до Я, предварительно вызывая String для преобразования элементов массива в строку (то же самое происходит и с числами). Исходя из вышеперечисленного, метод sort() сортирует элементы исходя из Unicode. Для сортировки чисел в метод передаётся аргументы, которые очень часто называется (a, b), где проходит сравнение, что => a - b.

    В случае с заданием, нам приходится сократить код и использовать только один знак, в моём случае это n. Почему же код действует? Как я понял это происходит потому, что компаратор (как я понял из одного из ответов на просторах в интернете, компаратор – это метод класса, который реализует сравнение объектов, признаки равенства и неравенства коего определяет тот, кто этот класс создал), использует тот факт, что его аргументы передаются слева-направо, из-за чего для многих массивов порядок сортировки такой: [‘A’, ’B’, ’C’, ’D’] => A> B> C> D, что собственно, логично. Следовательно, при перестановке в порядке возрастания – это фактически разворот (этот момент не совсем был мной понят).

    Однако, нечто подобное будет работать только для массивов с длиной менее одиннадцать, так как NodeJS переключает алгоритм сортировки для разных размеров массива, хотя это также используется и в других языках (стоит заметить, человек, написавший последнее, не проверял V8, чтобы подтвердить это).
    Можно даже сказать, что подобного рода реализация ошибочна, поскольку кроме как в CodeWars код не работает от слова совсем и он вообще не должен был работать. Таким образом, более-менее вероятный ответ – это допущение в NodeJS.
    Ответ написан
    5 комментариев
    5 комментариев