Forum PHP.pl > Problem ze zdarzeniem change(onchane)/blur(onblur)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem ze zdarzeniem change(onchane)/blur(onblur)

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

sebap123

3.10.2011, 14:30:56

Mam problem w skrypcie i prawdę powiedziawszy, nie wiem jaka jest jego przyczyna. W konsoli nic nie pojawia się żaden błąd, a skrypt i tak nie chce działać. Chodzi o to, że mam w skrypcie taką instrukcje:

Kod

newRow.innerHTML += '<br>Kolor:<input type="text" class="color" id="c'+ddList.ddEl.id+'" name="c'+ddList.ddEl.id+'" size=6>';
var myPicker = new jscolor.color(document.getElementById('c'+ddList.ddEl.id), {});
addEventSimple(document.getElementById('c'+ddList.ddEl.id),'blur',ddList.setColor(document.getElementById('c'+ddList.ddEl.id).value,ddList.ddEl));

i funkcje:

Kod

function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}

Kod

setColor: function(txt,obj){
document.getElementById('label1').innerHTML = txt;
},

Chciałbym, aby po zmianie zawartości pola input text zmienił się napis w polu label1 na wybrany numer koloru (korzystam tutaj z biblioteki jscolor. Według mnie wszystko jest dobrze napisane, ale w ogóle nie chce działać. Pojawia się tylko raz napis w momencie inicjalizacji i potem się nie zmienia.
Ma ktoś może jakiś pomysł?

mortus

3.10.2011, 15:37:23

To nie ma prawa działać, ponieważ zastosowanie atrybutu innerHTML nie wpływa na zmianę struktury DOM dokumentu HTML. Oznacza to tyle, że Twój element input, do którego próbujesz się później odwołać w funkcji getElementById istnieje w dokumencie HTML tylko jako tekst, a nie jako element struktury DOM. Rozwiązania są dwa:
1. zastosowanie biblioteki JavaScript (jQuery, Prototype, Dojo, itp.) - większość z nich ma odpowiednie metody, które modyfikują strukturę DOM,
2. stworzenie elementu input obiektowo i dodanie (appendChild) go do już istniejącego elementu struktury DOM:

[JAVASCRIPT] pobierz, plaintext 
var text = document.createTextNode("<br>Kolor:");
newRow.appendChild(text);
var element = document.createElement('input');
element.setAttribute('id', 'c'+ddList.ddEl.id);
element.setAttribute('name', 'c'+ddList.ddEl.id);
element.setAttribute('type', 'text');
element.setAttribute('class', 'color');
element.setAttribute('size', '6');
newRow.appendChild(element);
[JAVASCRIPT] pobierz, plaintext

sebap123

4.10.2011, 13:24:24

Ok, dzięki za podpowiedź, tego nie wiedziałem. Zmieniłem tak jak napisałeś:

Kod

newRow.innerHTML += '<br>Kolor:';
            var element = document.createElement('input');
            element.setAttribute('id', 'c'+ddList.ddEl.id);
            element.setAttribute('name', 'c'+ddList.ddEl.id);
            element.setAttribute('type', 'text');
            element.setAttribute('class', 'color');
            element.setAttribute('size', '6');
            newRow.appendChild(element);
            var myPicker = new jscolor.color(element, {});
            addEventSimple(element,'blur',ddList.setColor(element.value,ddList.ddEl));

Ale nadal nie wyświetla się tekst w momencie zmiany zawartości pola - nie ma tutaj znaczenia, czy jest to change, czy blur.
Co jeszcze może być nie tak?

Czy może mi ktoś coś doradzić?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.