Loading...
Ivelinka avatar Ivelinka 24 Точки

01. Mails Delivery от 13 March 2022

Здравейте, получавам 63/100 и единия бутон Delete - този който е с клас "delete" не работи. Някой може ли да ми помогне ?

Благодаря :)

задача: https://judge.softuni.org/Contests/Practice/Index/3395#0

код: 

function solve(){

  let form = document.querySelector('form')
  
 let listSection = document.getElementById('list')
 let sentSection = document.querySelector('.sent-list')
 let deleteSection = document.querySelector('.delete-list')

 form.children[6].children[1].addEventListener('click', onReset)
 function onReset(e){
  e.preventDefault()
  form.children[1].value = ''
  form.children[3].value = ''
  form.children[5].value = ''
 }

 form.children[6].children[0].addEventListener('click', onNext)
 function onNext(e){
  e.preventDefault()
  
if(!form.children[1].value || !form.children[3].value || !form.children[5].value) return
listSection.innerHTML = `<li>
<h4>Title: ${form.children[3].value}</h4>
<h4>Recipient Name: ${form.children[1].value}</h4>
<span>${form.children[5].value}</span>
<div id="list-action">
    <button type="submit" id="send">Send</button>
    <button type="submit" id="delete">Delete</button>
</div>
</li>
`
let newArr = [form.children[1].value, form.children[3].value, form.children[5].value]
form.children[1].value = ''
  form.children[3].value = ''
  form.children[5].value = ''  

document.getElementById('send').addEventListener('click', onSend)
function onSend(e){
  e.preventDefault()
  sentSection.innerHTML = `<li>
  <span>To: ${newArr[0]}</span>
  <span>Title: ${newArr[1]}</span>
  <div class="btn">
      <button type="submit" class="delete">Delete</button>
  </div>
</li>
  ` 
  listSection.innerHTML = ''
}
  document.getElementById('delete').addEventListener('click', clearOne)
  function clearOne(e){
    e.preventDefault()
   onDelete()
        listSection.innerHTML = ''
  }
  document.querySelector('.delete').addEventListener('click', clearTwo)
  function clearTwo(e){
    e.preventDefault()
   onDelete()
   sentSection.innerHTML = ''
  }
 function onDelete(){
  deleteSection.innerHTML = `
  <li>
      <span>To: ${newArr[0]}</span>
      <span>Title: ${newArr[1]}</span>
  </li>`
 }
}     
}

Тагове:
0
JavaScript Advanced
icowwww avatar icowwww 2779 Точки

Здравей,

Това, че бутона Delete не работи е най-малкия проблем. С оправянето му кода минава с 72/100.

Проблема е в основата. Страницата се разделя на 3 секции. List of mails, Sent mails и Deleted Mails. Всяка от тях може да съдържа неограничен брой <li> елементи. При твоето решение това не е възможно. Освен това задаваш готова HTML структура на атрибута innerHTML, като по този начин губиш връзка със създадения <li> елемент(ако в секцията, в която добавяш, вече имаш съществуващ елемент) и не се знае към кой трябва да добавиш евент. За да е по-лесно трябва да се използва createElement метода.(например https://softuni.bg/forum/42784/problem-s-zadacha-01-mails-delivery-ot-js-advanced-exam-13-march-2022)

Въпреки това, решението може да бъде поправено като:

1. Когато задаваш стойност на innerHTML, да добавяш към вече съществуващата

2. Когато добавящ стойност в една от трите секции, да обхождаш всички бутони по ид или клас от тази секция и да им закачаш евента(NodeList.forEach не позволен в judge, затова трябва да е с for цикъл)

3. Когато в някоя секция имаш повече от един <li> елемент и бутон, за който е закачена фунция, е натиснат трябва през евента да локализираш, в кой <li> си, за да приложиш логиката на функцията само за него. Например с e.target

4. При премахване на конкретен <li> във функциите трябва да тръгнеш отново през EventTarget-a(бутона, който е натиснат) и да се върнеш обратно към parent елементите, за да разбереш кой <li> да изтриеш

Ето поправеното решение: https://pastebin.com/sb52wCav

С ниското ми ниво ми в JS, промените със сигурност не са най-правилните

1
Ivelinka avatar Ivelinka 24 Точки

Много благодаря !

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.