Loading...
StrahilRuychev avatar StrahilRuychev 117 Точки

[Homework] Advanced JS - Functions and function expressions - Problem{7} DOM Manipulation

Забелязах две грешки в условието на задачата и по-конкретно в sample кода. Поне засега са само две. 

// Appends a list item to ul.birds-list

domModule.appendChild(liElement,".birds-list"); - тук реда на аргументите е сменен. liElement e детето, което трябва да се добави, т.е. трябва да се подаде второ.

// Adds a click event to all bird list items

domModule.addHandler("li.birds", 'click', function(){ alert("I'm a bird!") }); - доста чаках да закачи евенти на птичките, докато не смених li.birds на li.bird...

 

 

 

Тагове:
4
JavaScript Advanced
a.angelov avatar a.angelov 1316 Точки

Докладвай ги като грешки в самата инстанция на курса -  във всяка от лекциите има бутон "Докладвай грешка" и съответно посочваш къде е грешката и я описваш.

1
06/03/2015 17:53:42
Filkolev avatar Filkolev 4482 Точки

Имам и аз проблем с тази задача. Пробвах по няколко различни начина да закача евентите. Стана уж с един цикъл, в който минавам през елементите и закачам за всеки функцията. Т.е. работи, като кликна на някоя от птиците излиза алърта, но хвърля някакви грешки в конзолата точно на реда, в който слагам лисънъра - Хром: "Uncaught TypeError: undefined is not a function"; Мозила: "TypeError: elements[i].addEventListener is not a function".

Ето самата функция:

function addHandler(elements, eventType, eventHandler) {
     if (!(elements instanceof Element) && !Array.isArray(elements)) {
          elements = retrieveElements(elements);
     }

     if (!elements) {
          throw new ReferenceError("The element(s) requested could not be found.");
     }

     for (var i in elements) {
         elements[i].addEventListener(eventType, eventHandler, false);
     }
}

Елементите са ми в масив, който съм взел с querySelectorAll() в случай, че ми е подаден такъв, а не директно някакъв елемент. Сменил съм li.birds с li.bird. В крайна сметка - резултатът е налице, но искам все пак да разкарам и грешката.

Също, тоя forin не ме кефи много. Ако имате по-добри предложения споделяйте :)

0
07/03/2015 01:58:20
AleksandurSeferinkin avatar AleksandurSeferinkin 333 Точки

Точно този for in прави проблема - явно не си разбрал каква му е идеята. Този цикъл обикаля по пропъртитата на даден обект.

for (var property in object)

querySelectorAll връща обект, не обикновен масив. Това означава, че се опитваш да извикаш addEventListener на всичко, което стои зад пропъртитата на този обект. Обектът, за който говоря, се държи като масив - намерените елементи стоят зад индексирани пропъртита (0, 1, 2, 3...), обаче има и още няколко бонус такива(length и item в chrome).

За да си спестиш главоболията можеш да ползваш обикновен for цикъл или да направиш проверка.

for (var i in elements) {
if (elements[i] instanceof HTMLElement) {
elements[i].addEventListener(eventType, eventHandler, false);
}
}
1
07/03/2015 04:17:34
Filkolev avatar Filkolev 4482 Точки

forin знам как работи, грешката ми е, че не съм погледнал какво точно връща query selector-a и автоматично съм предположил, че е обикновен масив. Това обяснява доста неща.

Edit: селектора връща NodeList object. Това го бях гледал някъде, ама кой да сгрее, че е различно от масив... Сигурно нямаше да се сетя скоро сам къде да търся проблема.

Друг въпрос - как точно слагаш форматирания код в коментарите? Пробвах различни варианти на едитора, но винаги при пейста ми се насира индентацията.

1
07/03/2015 11:07:28
AleksandurSeferinkin avatar AleksandurSeferinkin 333 Точки

Слагам го в "pre", пействам - насира се. Изтривам новите редове и пак ги слагам. После трия спейсовете и пак ги слагам - по 4 спейса за 1 таб. Общо взето си играя стабилно. :D

ПС: Аз винаги проверявам дадена функция какво връща. При динамичните езици вече ще си имаш едно наум - 7 пъти мери, 1 път пиши. :D

1
07/03/2015 16:21:44
dim4o avatar dim4o 288 Точки

Здравейте, аз също имам един проблем с тази задача. Следния код не ми работи коректно:

function appendChild(element, child){
    var parent = document.querySelectorAll(element);
    var childNode = document.createElement(child);

    for (var i = 0; i < parent.length; i++) {
        parent[i].appendChild(childNode);
    }
}


Например ако го приложа appendChild("li", "a"); към един списък от рода (ul)((li)(li)(li)(li))(ul) ми го прилага само на последния child елемент - li; 

 

0
08/03/2015 15:41:11
dim4o avatar dim4o 288 Точки

Реших проблема => parent[i].appendChild(childNode.cloneNode()); Обяснено е добре тук.

1
Filkolev avatar Filkolev 4482 Точки

Аз доколкото разбрах условието само на един елемент трябва да се закачи, т.е. ползвах за тази функция querySelectior(). Но е доста полезно това, което си открил.

0
dim4o avatar dim4o 288 Точки

Аха, ами може и да имат впредвид само един елемент наистина. Аз се водих от това:

"If any selector is passed to the module, it should find (and manipulate) all elements the selector corresponds to ", т.е. в случая на всички <li>-та от DOM-a закачам <а> примерно. Така поне го разбирам аз.

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