Elementy <i>

Question

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?

Comments

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

---

        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;
            }
        })
    }

 

---

Propozycja zmian  

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;
        }
    })
}

---

Dziękuję za propozycję!

Answer 1

Proponuje użyć, closest(...) i getAttribute(...)  (dataset)    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
}

 

Comments

Nauczyłem się czegoś nowego, za co dziękuję! Zmieniłem swój kod i już wszystko działa:)

Answer 2

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) {}

 

Comments

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.

---

querySelectorAll zwraca tablicę elementów, na tablicy nie możemy wywołać addEventListener('click', () {}).

---

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.