js i notatnik

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

Witam,

Stworzyłem apke, jest tylko jeden maly problem, kiedy usune jakiegos diva , chcialbym, zeby numer notaki mi sie zmienial. Wygląda to tak, że kiedy usune załóżmy notatke nr 1 to zostaje mi notatka nr 2, a zeby wysztko ładnie wyglądało cyfra powinna sie zmieniac wedlug ilości divow, nie chce odpowiedzi,a raczej mała podpowiedż.

z góry dziekuje :)

<!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>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }   
        body {
            height: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
        }
        html {
            height: 100%;
            font-size: 16px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            font-size: 1.1rem;
            font-weight: bolder;
            color: chartreuse;
        }
        input {
            background-color: chartreuse;
            padding: 10px;
            width: 70px;
            align-self: center;
            margin: 20px 0;
            text-transform: uppercase;
            color: white;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        .notka {
            font-size: 1rem;
            font-family: Arial, Helvetica, sans-serif;
            padding: 5px;
            width: 550px;
            display: block;
        }
        h1{
            color: chartreuse;
        }
        .note_table {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            
        }
        .note_table div {
            display: flex;
            flex-direction: column;
            width: 550px;
            height: 100px;
            margin: 20px;
            border: 1px solid grey;
            border-radius: 5px;
            padding: 30px 5px;
            position: relative;
            font-style: italic;
        }
        span {
            position: absolute;
            top: 2px;
            left: 2px;
            font-weight: bold;
            padding: 0px 5px;
        }
        button {
            background-color: chartreuse;
            padding: 10px 20px;
            width: 100px;
            align-self: flex-end;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 0;
        }
     
    </style>
</head>
<body>
   <div class="container">
    <h1>Notatka</h1>
  <form action="note"id="form">
      <label for="place-for-note">Dodaj notatke:</label>
      <textarea name="note" class="notka" id="new_note" cols="60" rows="3" placeholder="Dodaj tekst ! :)"></textarea>
      <input type="submit" value="Dodaj" id="add_btn">
  </form>
  
  <div class="note_table">
    
</div>
</div>


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

const textNote = document.getElementById('new_note');
const form = document.getElementById('form');
const table = document.querySelector('.note_table');
let number = 1;

form.addEventListener('submit', function newText(e) {
    e.preventDefault()
    if (textNote.value === "") {
        alert("DODAJ NOTATKE")
        return;
    }
    const newDiv = document.createElement('div');
table.appendChild(newDiv)

newDiv.textContent = textNote.value;
if (newDiv.textContent === textNote.value){
    textNote.value = "";
}
let span = document.createElement('span');
newDiv.appendChild(span);
span.textContent = `Notatka  ${number++}` ;

const deleteBtn = document.createElement('button');
newDiv.appendChild(deleteBtn);
deleteBtn.textContent = "Usuń"

deleteBtn.addEventListener('click', () => {
  table.removeChild(newDiv)
 
number--;
});
});

2 odpowiedzi

odpowiedź 28 września 2021 przez VBService Ekspert (253,340 p.)
wybrane 28 września 2021 przez ferdynand

Najlepsza

Proponuję takie rozwiązanie.

Dać możliwość wprowadzenia tytułu notatki użytkownikowi, ewentualnie jak nie wpisze wygenerować domyślny tytuł notatki.

<form action="note"id="form">
  <label for="note-title">Tytuł notatki:</label>
  <input type="text" id="note-title" name="note_title" />
  
  . . .

</form>

a listę dodanych notatek zrobić w oparciu o tag <ol>, wtedy po usunięciu elementu z listy zostanie ona przenumerowana automatycznie przez przeglądarkę.

<div class="note_table">
  <ol>
    <li>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <span>Notatka  lorem</span>
        <button>Usuń</button>          
      </div>
    </li>
    <li>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <span>Notatka  ipsum</span>
        <button>Usuń</button>          
      </div>
    </li>
    <li>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <span>Notatka  dolor</span>
        <button>Usuń</button>          
      </div>
    </li>
    <li>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <span>Notatka  sit amet</span>
        <button>Usuń</button>          
      </div>
    </li>
    <li>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <span>Notatka  consectetur</span>
        <button>Usuń</button>          
      </div>
    </li>
  </ol>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.note_table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}
.note_table div {
  display: flex;
  flex-direction: column;
  width: 550px;
  height: 100px;
  margin: 20px;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 30px 5px;
  position: relative;
  font-style: italic;

  font-size: 16px;
  font-weight: normal;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
span {
  position: absolute;
  top: 2px;
  left: 2px;
  font-weight: bold;
  padding: 0px 5px;
}
button {
  background-color: chartreuse;
  padding: 10px 20px;
  width: 100px;
  align-self: flex-end;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0;

  position: relative;
  bottom: 1em;
}

ol {
  list-style-type: decimal;
  font: 900 1.2em monospace;
}

const buttons_delete_note = document.querySelectorAll('.note_table button');

buttons_delete_note.forEach((button) => {
  button.addEventListener('click', ({target}) => {
    target.closest('li').remove();
  });
});

[ Funkcja closest ] [ Custom List Number Styling ]

odpowiedź 27 września 2021 przez Wiciorny Ekspert (270,110 p.)

W momencie akcji usuwania dodać odpowiednią akcje/funkcje do tego wywołania która aktualizuje ci text w umieszczonych spanach,
Generalnie tak najprościej, jednak tutaj przydało by się nadać im np klasę, może zbierać je do kolekcji i wtedy zależnie od pozycji w tej kolekcji przypisywać im aktualny numer

Spójrz na przykład dla rekordów w danym zadaniu tutaj
https://stackoverflow.com/questions/64968189/jquery-re-index-order-after-removing-dynamically-added-items