java script ,sprawdzanie input

pytanie zadane 19 września 2021 w JavaScript przez ferdynand Obywatel (1,250 p.)

Witam,

robie małe zadanka, aby utrwalić sobie js'a i zrobilem taka liste wydatków, której wogóle nie stylowalem, więc nie zwracajcie uwagi na wygląd. Chciałem sie skupić tylko na JS i teraz wszystko śmiga,ale problem jest wtedy gdy inputy są puste,a i tak dodają mi sie <li> do <ul>, a chciałbym zeby dodawało mi tylko elementy do listy, gdy będą one wpisane w inputach. Wpisywałem juz wszystko w if, kombinowałem i dalej nie wiem co mozna tam wpisac ? chyba, ze poprostu kod jest gdzieś zle napisany lub umieszczony ?. Prosiłbym tez o ocenienie tego zadania, czy według Was wszystko jest ok, pomijając oczywiście problem z inputami i wygląd. Pozdrawiam i dziekuję za opowiedzi :)

<!DOCTYPE html>
<html lang="pl">
<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">
    <title>Document</title>
    <style>
      
        
        ul {
        background-color: blanchedalmond;
        display: inline;
        }
        ul li {
            background-color: pink;
            padding: 0 20px;
            display: inline;
        }
        
    </style>
</head>
<body>
    <h1>Wydatki!</h1>
    <label for="nazwa">Nazwa:</label>
    <input id= "nazwa"type="text" placeholder="Miejsce wydatku"> 
    <label for="date">Data:</label>
    <input id="date" type="date">
    <label for="kwota">Kwota:</label>
    <input id="kwota" type="number">
    <button id="dodaj">Dodaj wydatek</button>
    
    <div>
        <span>Nazwa:
            <ul></ul>
        </span>
        <span>Data:
            <ul></ul>
        </span>
        <span>Kwota:
            <ul></ul>
        </span>
        <span>złotych
            <ul></ul>
        </span>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

const nameInput = document.getElementById('nazwa');
const dateInput = document.getElementById('date');
const priceInput = document.getElementById('kwota');
const addBtn = document.getElementById('dodaj');
const expances = document.querySelectorAll('ul');


  addBtn.addEventListener('click', () =>  {
    const newExpances = document.createElement('li');
    expances.forEach(expance => {
      expance.appendChild(newExpances.cloneNode(true))
    })
      let firstChild = expances[0].lastChild;
      let secondChild = expances[1].lastChild;
      let thirdChild = expances[2].lastChild;
      let forthChild = expances[3].lastChild;
      firstChild.textContent = nameInput.value;
      secondChild.textContent = dateInput.value;
      thirdChild.textContent = priceInput.value;

      // dodanie btn do usuwania <li></li>
      const deleteBtn = document.createElement('button');
      forthChild.appendChild(deleteBtn);
      deleteBtn.textContent = "Usuń";

      // // event na btn do usuwania <li></li>
      deleteBtn.addEventListener('click', function removeExpances () {
        forthChild.removeChild(deleteBtn);
        expances[0].removeChild(expances[0].lastChild);
        expances[1].removeChild(expances[1].lastChild);
        expances[2].removeChild(expances[2].lastChild);
        expances[3].removeChild(expances[3].lastChild);
      })
      // // if do sprawdzania inputow 
      if (nameInput.value === "") {
      
      }
      if (dateInput.value === "") {
        
      }
      if (priceInput.value === "") {
        
      }
      
      // if do czyszcznie inputow po dodaniu li do ul 
      if (firstChild.textContent === nameInput.value) {
        nameInput.value = "";
      }
      if (secondChild.textContent === dateInput.value) {
        dateInput.value = "";
      }
      if (thirdChild.textContent === priceInput.value) {
        priceInput.value = "";
      }
     
  })

komentarz 19 września 2021 przez Velta Maniak (52,010 p.)

Gdyby był to pełnoprawny semantycznie formularz, do kontrolek formularza wystarczyłoby dodać atrybut required.

komentarz 19 września 2021 przez overcq Pasjonat (21,650 p.)

@ferdynand, wystarczy sprawdzić na początku listenera, czy któryś z inputów jest pusty, i wyjść z funkcji. Natomiast funkcja do usuwania wydatku jest błędna: zawsze usuwa ostatni wydatek oraz dwukrotnie usuwa przycisk usuwania (czyli usuwa kolejny przycisk).

2 odpowiedzi

odpowiedź 19 września 2021 przez Piotr Błaszczak Bywalec (2,890 p.)
wybrane 19 września 2021 przez ferdynand

Najlepsza

Sprawdzenie inputow musisz dać na początku, zanim cokolwiek z nich pobierzesz. Przenieś je na początek funkcji a w środku w każdym z nich wpisz po prostu "return;" co spowoduje wyjście z funkcji i nie wykonanie dodawania elementu do listy. Co więcej nie musisz sprawdzać każdego inputu po kolei, możesz to zrobić w jednym ifie w taki sposób :

  if (nameInput.value === "" || dateInput.value === "" || priceInput.value === "") {
        return;
    }

Dwie kreski w JS oznaczają "lub".

Jak tak przejrzałem apke to nie działa do końca usuwanie elementów. Usuwasz zawsze ostatni element, niezależnie który z nich chcesz usunąć. Powinieneś nadawać jakiś klucz elementom po którym będziesz je identyfikował i usuwał :)

Powodzenia

odpowiedź 19 września 2021 przez VBService Ekspert (253,140 p.)
edycja 19 września 2021 przez VBService

Przez użycie: document.querySelectorAll z ustawionym selektorem na "input", możesz w łatwy sposób sprawdzić wszystkie input-y czy nie są puste i później "wyczyścić" ich zawartość jeśli to konieczne.

Przykład

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>         
      ul {
        background-color: blanchedalmond;
      }
      ul li {
        background-color: pink;
        padding: 0 20px;
        font: 300 1em monospace;
      }
      ul li span {
        display: inline-block;
        margin-right: 0.1em;
        width: 12em;
      }
      ul li button  {
        margin: 0 0.15em;
      }      
    </style>
  </head>
  <body>
    <h1>Wydatki!</h1>
    <label for="name">Nazwa:</label>
    <input id="name" type="text" placeholder="Miejsce wydatku" data-name="Nazwa"> 
    <label for="date">Data:</label>
    <input id="date" type="date" data-name="Data">
    <label for="amount">Kwota:</label>
    <input id="amount" type="number" data-name="Kwota">
    <button id="add-expance">Dodaj wydatek</button>

    <div class="info"></div>
    <div class="expances">
      <ul></ul>
    </div>

    <script src="app.js"></script>
  </body>
</html>

const inputs       = document.querySelectorAll('input'),
      button_add   = document.getElementById('add-expance'),
      div_info     = document.querySelector('.info'),
      ul_expances  = document.querySelector('.expances ul');

button_add.addEventListener('click', () => {
  let empty_value = '', expance_value = '';

  inputs.forEach((input) => {
    // zalecane jest dodanie atrybutu "required" do input-ów
    if (input.value == '') {
      empty_value += input.dataset.name + ', ';
    } else {
      expance_value += `<span>${input.dataset.name}: ${input.value}</span>`;
    }
  });

  if (empty_value) {
    div_info.textContent = 'Proszę wypełnić pol(a)e: ' + empty_value.slice(0, -2);
  } else {
    div_info.textContent = '';

    const new_expance = document.createElement('li');    
    new_expance.innerHTML = expance_value;

    const button_delete = document.createElement('button');
    button_delete.textContent = "Usuń";
    new_expance.appendChild(button_delete);    
    ul_expances.appendChild(new_expance);

    inputs.forEach((input) => { input.value = ''; });

    button_delete.addEventListener('click', ({target}) => {
      const li_expance = target.closest('li');
      ul_expances.removeChild(li_expance);
    })
  }
});