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

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

Тагове:

06/03/2015 17:45:28 JavaScript Advanced

a.angelov 1316 Точки

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

06/03/2015 17:50:36 06/03/2015 17:53:42

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 не ме кефи много. Ако имате по-добри предложения споделяйте :)

07/03/2015 01:56:07 07/03/2015 01:58:20

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

07/03/2015 04:09:28 07/03/2015 04:17:34

Filkolev 4482 Точки

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

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

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

07/03/2015 11:03:30 07/03/2015 11:07:28

AleksandurSeferinkin 333 Точки

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

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

07/03/2015 16:12:44 07/03/2015 16:21:44

Покажи всички коментари

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;

08/03/2015 15:28:30 08/03/2015 15:41:11

dim4o 288 Точки

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

08/03/2015 16:06:06

Filkolev 4482 Точки

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

08/03/2015 17:20:38

dim4o 288 Точки

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

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

08/03/2015 17:34:49 08/03/2015 17:39:01

Покажи всички коментари