Список дел с использованием массива и цикла

Я хочу создать список дел, используя массив и цикл, и отобразить список в контейнере div. Я могу отобразить список, но он умножает тот же список, который хранится и отображается.

<body>
    <p class = "title"> Todo List </p>
    <input type = "text" class = "js-input-todo" placeholder = "Todo name">
    <button type = "submit" class = "js-btn-todo" onclick = "handleAddTodo()">Add</button>

    <div class = "todo-list"></div>

 <script src = "script/11-arrays-loop.js"></script>
</body>

//script 

let names = []

let todoListHTML = ''

function handleAddTodo(){
  const todo_input = document.querySelector('.js-input-todo');
  const todoValue = todo_input.value
  const result = document.querySelector('.todo-list');
 
  names.push(todoValue);
  for(let i = 0; i <  names.length ; i++){
   let todoName = names[i]
   const html = `<p>${todoName} </p>`
   todoListHTML = html;
   result.innerHTML +=todoListHTML;
   
   todo_input.value = '';
  }
  
  

}

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

Потому что каждый раз, когда вы добавляете один элемент, вы снова перебираете весь список и добавляете каждый элемент в HTML… Просто не делайте этого?

— 19.07.2024 07:50

Поскольку вы используете JavaScript в браузере, вы можете использовать document.createElement для создания узла и использовать textContent вместо InnerHTML. Таким образом, вам не придется очищать вставляемый текст от нежелательного HTML-кода, который может сломать вашу страницу.

— 19.07.2024 08:26

javascript html arrays function for-loop

19.07.2024 07:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

    const names = [];
    const result = document.querySelector(".todo-list");
    const todo_input = document.querySelector(".js-input-todo");
    function handleAddTodo() {
      const todoValue = todo_input.value;
      const html = document.createElement("p");
      html.innerHTML = todoValue;
      result.append(html);
      names.push(todoValue);
      todo_input.value = "";
      console.info(names, "names");
    }

Ваш ответ можно улучшить, добавив дополнительную вспомогательную информацию. Пожалуйста, отредактируйте , добавив дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.

— 19.07.2024 12:40

19.07.2024 08:58

Ответ принят как подходящий

Попробуй это ,

<!DOCTYPE html>
<html lang = "en">
<head>
</head>
    <script>
        let names = [];
        let todoListHTML = ''

function handleAddTodo(){
  const todo_input = document.querySelector('.js-input-todo').value;
  const todoValue = todo_input.value
  const result = document.querySelector('.todo-list');
 
  names.push(todoValue); 
   const html = `<p>${todo_input} </p>`
   todoListHTML = html;
  result.innerHTML +=todoListHTML;
  todo_input.value = '';
}
</script>

<body>
    <p class = "title"> Todo List </p>
    <input type = "text" class = "js-input-todo" placeholder = "Todo name">
    <button type = "submit" class = "js-btn-todo" onclick = "handleAddTodo()">Add</button>

    <div class = "todo-list"></div>

 </body>
</html>

20.07.2024 07:05

вам нужно сделать этот div пустым перед запуском цикла For.

добавьте этот result.innerHTML = ' ' перед циклом For.

let names = [];
let todoListHTML = ''

function handleAddTodo(){
     
     const todo_input = document.querySelector('.js-input-todo')
     const todoValue = todo_input.value
     const result = document.querySelector('.todo-list')

     result.innerHTML = ''
     names.push(todoValue)

     for(let i = 0; i <  names.length ; i++){

          let todoName = names[i]
          const html = `<p>${todoName}</p>`
          todoListHTML = html
          result.innerHTML +=todoListHTML
          todo_input.value = ''
     }

}

<!DOCTYPE html>
<html lang = "en">
<head>
</head>
<body>
    <p class = "title"> Todo List </p>
    <input type = "text" class = "js-input-todo" placeholder = "Todo name">
    <button type = "submit" class = "js-btn-todo" onclick = "handleAddTodo()">Add</button>

    <div class = "todo-list"></div>

 </body>
</html>

Судя по вашему коду, я думаю, вы новичок в программировании. я рекомендую вам использовать IDE (против кода) для лучшего форматирования кода.

для этого вам действительно не нужен цикл.

<!DOCTYPE html>
<html lang = "en">
<head>
</head>
<script>

let names = [];
let todoListHTML = ''

function handleAddTodo(){

     const todo_input = document.querySelector('.js-input-todo')
     const todoValue = todo_input.value
     const result = document.querySelector('.todo-list')


     names.push(todoValue)

     let todoName = names[names.length-1]
     const html = `<p>${todoName}</p>`
     result.innerHTML +=html
     todo_input.value = ''
}

</script>


<body>
    <p class = "title"> Todo List </p>
    <input type = "text" class = "js-input-todo" placeholder = "Todo name">
    <button type = "submit" class = "js-btn-todo" onclick = "handleAddTodo()">Add</button>

    <div class = "todo-list"></div>

 </body>
</html>

20.07.2024 10:56

Другие вопросы по теме

Безопасен ли межсайтовый скриптинг (XSS) <textarea>.value?

Ссылка на YouTube не работает в скомпилированном файле справки CHM

CSS Grid - сделать следующую строку шириной 100% и равномерно распределить элементы

Как вызвать событие при выборе даты ввода, когда значение не изменилось?

Как изменить цвет тени блока на «размытие» перевернутых углов в CSS

Попытка изменить размер div в процентах от всей страницы

Создание пользовательской кнопки добавления в корзину для переменных продуктов с вариациями в WooCommerce

Как я могу расположить несколько загруженных изображений горизонтально (слева направо)?

Есть ли способ разместить диалог поверх модального диалога?

Переход по свойству Fill с линейным градиентом внутри SVG

Список дел с использованием массива и цикла

Ответы 3

Другие вопросы по теме

Похожие вопросы