Блог

Главная - Вопросы по программированию - Передача значений в массив

Передача значений в массив

#javascript

Вопрос:

Когда вводится значение(персона), код создается <li> с его именем. Несколько имен, несколько <li> . Я также хотел бы передать все ценности people для дальнейшего использования.

 const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
let people

const generateTemplate = todo => {
  const html = `
    <li>
        <span>${todo}</span>
        <i class="far fa-trash-alt delete"></i>
    </li>`
  list.innerHTML  = html;
}

addForm.addEventListener('submit', e => {
  const todo = addForm.add.value.trim();
  e.preventDefault();
  if (todo.length) {

    if (people === null) {
      people = [];
    }
    people.push(todo);
    console.log(people)
  }
  generateTemplate(todo);
  addForm.reset();
  people.push(todo)

  console.log(people)
}); 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <title>Todolist</title>
</head>

<body>
  <form action="" class="add">
    <h1>Group generator</h1>

    <input type="text" id="name" name="add" placeholder="Enter name here">

    <input type="submit" value="submit them">
    <p>you can also press enter instead</p>

  </form>

  <ul class="todos">

  </ul>
</body>
</html>

Комментарии:

1. if (people === null) это будет неправдой. Вы не инициализировали people , так что это undefined не null так .

2. Почему бы тебе просто не сделать let people = []; так, чтобы тебе не понадобился этот тест?

3. Либо сделайте people == null, с двумя равными, он проверяет, является ли он нулевым или неопределенным. Или вы используете людей === не определено. Или вы просто правильно инициализируете людей, как сказал @Barмар. пусть люди = [];

Ответ №1:

Вместо people===null использования if (!people) , потому что люди не определены в первый раз:

 if (!people) {
      people = [];
} 
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>Todolist</title>
</head>
<body>
    <form action="" class="add">
        <h1>Group generator</h1>

        <input type="text" id="name" name="add" placeholder="Enter name here">
    
        <input type="submit" value="submit them"> <p>you can also press enter instead</p>

    </form>

    <ul class="todos">
        
    </ul>


    <script>
const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
let people

const generateTemplate = todo => {

    const html = `
    <li>
        <span>${todo}</span>
        <i class="far fa-trash-alt delete"></i>
    </li>`
    list.innerHTML  = html;
  
  

}

addForm.addEventListener('submit', e => {
debugger
    const todo = addForm.add.value.trim();
    e.preventDefault();
    if (todo.length) {
            
       if (!people) {
            people = [];
        } 
        people.push(todo);
        console.log(people)
    }
        generateTemplate(todo);  
        addForm.reset(); 
    people.push(todo)

    console.log(people) 


}); 
</script>
</body>
</html>

Комментарии:

1. Использование пользовательского ввода в литерале шаблона, который затем назначается через innerHTML, откроет вектор межсайтового скриптинга.

2. Я бы правильно объявил людей, написав «пусть люди = []», но, предполагая, что люди-это ответ от API, я бы использовал if (people == null), он проверяет, являются ли люди нулевыми или неопределенными. Однако ваш подход тоже кажется правильным 🙂

3. @MrJami Я абсолютно согласен с вами, однако я стараюсь решить проблему без серьезных изменений 🙂

4. @Mic извини, я тебя не понимаю.

5. @AlirezaAhmadi Например, введите <img src=/ onerror=alert('xss') /> в текстовое поле и отправьте его.

Метки: