Kopiowanie tekstu razem z numerem

Question

Witam,

Tworzę stronę, która po kliknięciu na przycisk, przenosi odpowiedni tekt (wiadomość) do listy. Następnie po dodaniu kilku wiadomości za pomocą kolejnego przycisku można skopiować całą listę. Używam tagów <ol><li>:

 Niestety nie mogę znależć odpowieniej właściwości która skopiuje tekst razem z numerami listy. Tekst kopiuje się dobrze jednak nie zwraca numerów a samą treść. Próbowałem textcontent, innerText, innerHTML :

<a onclick="copyToClipboard(document.getElementById('text-list').innerText)">

Czy jest jakaś właściwość która zwracałaby tekst razem z numerem?

Z góry dzięki!

Answer 1

Moim zdaniem źle podchodzisz do problemu zapisania tej listy. Nie myśl w kategoriach elementów <li> itp. Nie jest ważne czy są to li czy div czy co innego. Po prostu po kliknięciu w ten przycisk kopiowania listy można pobrać referencję do całego rodzica, np. do ul i po prostu operować na jego dzieciach li i masz wtedy ich ilość, indeksy, wartości itp. Ale generalnie to rozdziel html i js, czyli nie pobieraj referencji np. do elementu ul ale do jakiegoś tam elementu np. o id="result-list". Możesz też pobrać referencje np. do poszczególnych elementów i od razu je trzymać w jednej tablicy, np.

// html:
<ul class="list">
  <li class="list__item">Wartość 1</li>
  <li class="list__item">Wartość 2</li>
  <li class="list__item">Wartość 3</li>
  <li class="list__item">Wartość 4</li>
</ul>
// JS:
const list = document.querySelectorAll('.list__item');

// albo:
const list = [...document.querySelectorAll('.list__item')];
// jeśli chcemy mieć Array.prototype

 

i teraz w JS masz listę elementów, możesz odczytywać ich wartości, indeksy itp. Nawet jeśli w html zmienisz powiedzmy z listy ul na ol to w JS nic się nie zmieni, bo pobieramy referencję wg klasy css a nie znacznika html.

Comments

Tu masz na szybko prostego codepena:

https://codepen.io/Tomek_Sochacki/pen/MXNeoq?editors=1011

W konsoli pokazują się dane po puszczeniu metody map na pobranej liście referencji do elementów z klasą "list__item". Dalej możesz w JS robić z tym co tylko chcesz, masz zwykłą tablicę typu Array<Object<{index: number, value: string}>>

---

Dzięki za odpowiedź.

Zależy mi na tym żeby elementy automatycznie sie numerowały gdy doda się element. Tak żeby każdy nowy element miał już numer. Nastepnie po skopiowaniu listy powinny być od razu skopiowane numery. Poniżej wysyłam uproszczony kod

// tutaj mam listę do której będzie skopiowana wiadomość, oraz przycisk który ją kopiuje
<div>
    <ol id="thelist"></ol>
    <a onclick="copyToClipboard(document.getElementById('thelist').innerHTML)">
        <button>
            Copy
        </button>
    </a>
</div>

// tutaj mam wiadomość która będzie dodana do listy po kliknięciu
<div>
        <h3>         
            <script>                 
            function copyto() {
                var para = document.createElement("li");                     
                child1 = document.getElementById("ID3");                     
                para.appendChild(child1);                     
                document.getElementById("thelist").appendChild(para);                                      
                }         
            </script>
            <a onclick="copyto()">
                <button>
                    Message 1
                </button>
            </a>
            <p id="ID3">     
                Message 1 Content
            </p>
        </h3>
</div>