• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Elementy <i>

+1 głos
459 wizyt
pytanie zadane 5 marca 2021 w HTML i CSS przez Fonteinbloem Użytkownik (660 p.)
Hej, więc mam dodany przycisk i w nim jeszcze tag <i> z ikonką. W javascripcie mam napisany kod, który po kliknięciu na przycisk, wykonuje metodę parentElement i problem polega na tym, że gdy kliknę na przycisk, to wszystko działa poprawnie, a gdy kliknę na ikonkę w przycisku, to pobiera złego rodzica elementu i nie działa tak jak chcę. Da się jakoś wyłączyć klikanie tej ikonki, żeby pełniła tylko funkcję estetyczną, albo zrobić to w jakiś inny sposób?
komentarz 5 marca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż proszę kod.

https://forum.pasja-informatyki.pl/faq#jak-wstawic-kod-zrodlowy

"Na oko" powinno pomóc dodanie warunku, który wykona kod, jeśli event.target nie będzie elementem <i>.

komentarz 5 marca 2021 przez Fonteinbloem Użytkownik (660 p.)
        row.innerHTML = `
        <td style='font-weight: 500;'>${book.title}</td>
        <td style='font-weight: 500;'>${book.author}</td>
        <td style='font-weight: 500;'>${book.isbn}</td>
        <td style='font-weight: 500;'>${book.pages} pages</td>
        <td><a href='#' class='btn btn-success done'><b>√</b></a><a href='#' class='btn btn-light edit'><i class="fas fa-pen edit"></i></a><a href='#' class='btn btn-danger delete'>X</a></td>`;

document.querySelector('#book-list').addEventListener('click', function(e) {
    if (e.target.classList.contains('edit')) {
        if (isEdited===false) {
            UI.editBook(e);
    static editBook(book) {
        isEdited = true;
        let submit = document.querySelector('#submit');
        submit.style.backgroundColor = 'orange';
        submit.value = 'Save';

        isbn = book.target.parentElement.previousElementSibling.previousElementSibling.textContent;
        const books = JSON.parse(localStorage.getItem('books'));
        books.forEach( (book) => {
            if (book.isbn === isbn) {
                document.querySelector('#title').value = book.title;
                document.querySelector('#author').value = book.author;
                document.querySelector('#number-of-pages').value = book.pages;
            }
        })
    }

 

komentarz 6 marca 2021 przez VBService Ekspert (256,600 p.)

Propozycja zmian  smiley

document.querySelector('#book-list').addEventListener('click', function(e) {
    if (e.target.classList.contains('edit')) {
        if (isEdited===false) {
            UI.editBook(e);

na

document.querySelector('#book-list').addEventListener('click', function(e) {
    if (e.target.classList.contains('edit')) {
        if (isEdited===false) {
            UI.editBook(e.target);
static editBook(book) {
    isEdited = true;
    let submit = document.querySelector('#submit');
    submit.style.backgroundColor = 'orange';
    submit.value = 'Save';
 
    isbn = book.target.parentElement.previousElementSibling.previousElementSibling.textContent;
    const books = JSON.parse(localStorage.getItem('books'));
    books.forEach( (book) => {
        if (book.isbn === isbn) {
            document.querySelector('#title').value = book.title;
            document.querySelector('#author').value = book.author;
            document.querySelector('#number-of-pages').value = book.pages;
        }
    })
}


na


static editBook(book) {
    isEdited = true;
    const submit = document.querySelector('#submit');
    submit.style.backgroundColor = 'orange';
    submit.value = 'Save';
 
    let isbn;
    if (book.nodeName == 'I') { // <i>
      isbn = book.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.textContent;
    } else {
      isbn = book.parentElement.previousElementSibling.previousElementSibling.textContent;
    }

    const books = JSON.parse(localStorage.getItem('books'));
    books.forEach( (book) => {
        if (book.isbn === isbn) {
            document.querySelector('#title').value = book.title;
            document.querySelector('#author').value = book.author;
            document.querySelector('#number-of-pages').value = book.pages;
        }
    })
}
komentarz 8 marca 2021 przez Fonteinbloem Użytkownik (660 p.)
Dziękuję za propozycję!

2 odpowiedzi

+1 głos
odpowiedź 6 marca 2021 przez VBService Ekspert (256,600 p.)
wybrane 7 marca 2021 przez Fonteinbloem
 
Najlepsza

Proponuje użyć, closest(...) i getAttribute(...)  (dataset)  wink  Codepen

<table>
  <!--                          ${book.isbn}    -->
  <tr id="book-list" data-isbn="978-83-246-8920-0">
    <!-- ${book.title} -->
    <td>C++. Przewodnik dla początkujących</td>
    <!-- ${book.author} -->
    <td>Alex Allain</td>
    <!-- ${book.isbn} -->
    <td>978-83-246-8920-0</td>
    <!-- ${book.pages} -->
    <td>400</td>
    <td>
      <a href='#' class='btn btn-success done'><b>√</b></a>
      <a href='#' class='btn btn-light edit'><i class="fas fa-pen edit"> edit</i></a>
      <a href='#' class='btn btn-danger delete'>X</a>
    </td>
  </tr>
  <!--                          ${book.isbn}    -->
  <tr id="book-list" data-isbn="978-83-246-4886-3">
    <!-- ${book.title} -->
    <td>HTML5. Podręcznik programisty</td>
    <!-- ${book.author} -->
    <td>Chuck Hudson</td>
    <!-- ${book.isbn} -->
    <td>978-83-246-4886-3</td>
    <!-- ${book.pages} -->
    <td>384</td>
    <td>
      <a href='#' class='btn btn-success done'><b>√</b></a>
      <a href='#' class='btn btn-light edit'><i class="fas fa-pen edit"> edit</i></a>
      <a href='#' class='btn btn-danger delete'>X</a>
    </td>
  </tr>
</table>

<div id="edit-box" class="hide">
  <input type="text" id="title">
  <input type="text" id="author">
  <input type="text" id="number-of-pages">
  <input type="button" id="submit">
</div>
table {
  width: 95vw;
}
#book-list td {
  font-weight: 500; /* <td style='font-weight: 500;'> */
}
td {
  padding: 0.25em;
}
input[type="text"] {
  display: block;
  margin: 0.25em;
  width: 20em;
}
input[type="button"] {
  display: block;
  margin: 0.5em 0.25em;
  width: 5em;
}
a.btn {
  font-size: 0.8em;
  padding-right: 0.5em;
  text-decoration: none;
}
.hide {
  display: none;
}
const edit_box = document.querySelector('#edit-box');
const   submit = document.querySelector('#submit');

let isEdited = false;

[...document.querySelectorAll('#book-list')].forEach(book => {
  book.addEventListener('click', (e) => {
    const el = e.target;
    if (el.classList.contains('edit')) {
      if (isEdited === false) {
        isEdited = true;
        const isbn = el.closest('tr#book-list').getAttribute('data-isbn');
        //console.log(isbn);
        editBook(isbn);      
      }
    }
  });
});

submit.addEventListener('click', (e) => {
  edit_box.classList.add('hide');
  isEdited = false;
  // Twój kod zapis edytowanych danych
});

function editBook(isbn) {
  edit_box.classList.remove('hide');  
  submit.style.backgroundColor = 'orange';
  submit.value = 'Save';

  /* 
  const books = JSON.parse(localStorage.getItem('books'));
  books.forEach( (book) => {
    if (book.isbn === isbn) {
      document.querySelector('#title').value = book.title;
      document.querySelector('#author').value = book.author;
      document.querySelector('#number-of-pages').value = book.pages;
    }
  });
  */
  document.querySelector('#title').value = isbn; // dla demonstarcji
}

 

1
komentarz 7 marca 2021 przez Fonteinbloem Użytkownik (660 p.)
Nauczyłem się czegoś nowego, za co dziękuję! Zmieniłem swój kod i już wszystko działa:)
–1 głos
odpowiedź 5 marca 2021 przez niezalogowany

Zamiast:

document.querySelector('#book-list').addEventListener('click', function(e) {
    if (e.target.classList.contains('edit')) {

dodawać zdażenie do konkretnych linków. Wtedy zdażenie wywoła się na samym linku a nie na <i>.

document.querySelectorAll('#book-list a.edit').addEventListener('click', function(e) {}

 

komentarz 5 marca 2021 przez Fonteinbloem Użytkownik (660 p.)
Nie działa. I wtedy nie będę mógł sprawdzać warunku czy dany element ma jakieś słowo w klasie, bo mam jeszcze usuwanie, dodawania książek itp., więc jest więcej tych przycisków.
komentarz 6 marca 2021 przez CubeStorm Pasjonat (15,020 p.)
querySelectorAll zwraca tablicę elementów, na tablicy nie możemy wywołać addEventListener('click', () {}).
komentarz 6 marca 2021 przez niezalogowany
no tak. Przyzwyczajenie z jQuery. Chodziło mi o dodawanie zdarzeń do konkretnych linków z klasą edit a nie do całej listy i sprawdzanie target.

Podobne pytania

0 głosów
4 odpowiedzi 392 wizyt
pytanie zadane 6 marca 2020 w HTML i CSS przez tgv Użytkownik (890 p.)
+1 głos
1 odpowiedź 410 wizyt
pytanie zadane 9 lutego 2021 w HTML i CSS przez kajman_Rrzeczny Użytkownik (960 p.)
0 głosów
0 odpowiedzi 253 wizyt
pytanie zadane 21 sierpnia 2023 w JavaScript przez Reapel Początkujący (320 p.)

93,630 zapytań

142,552 odpowiedzi

323,056 komentarzy

63,137 pasjonatów

Advent of Code 2025

Top 15 użytkowników

  1. 2416p. - dia-Chann
  2. 2390p. - DziarnowskiJ
  3. 2317p. - raydeal
  4. 2243p. - rucin93
  5. 2242p. - Łukasz Piwowar
  6. 2222p. - CC PL
  7. 2184p. - Adrian Wieprzkowicz
  8. 2082p. - Michal Drewniak
  9. 1957p. - Maurycy W
  10. 1887p. - Łukasz Eckert
  11. 1885p. - robwarsz
  12. 1811p. - rafalszastok
  13. 1600p. - Rafał Trójniak
  14. 1588p. - Tomasz Bielak
  15. 1377p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...