Witam,

z javascript miałem bardzo mało do czynienia (głównie PHP), ale uczę się na bieżąco robiąc własne projekty. W chwili obecnej mam ciężki orzech do rozgryzienia. Chciałbym dodać opcję, że po kliknięciu użytkownikowi pojawiają się 2 nowe textboxy obrazujące współrzędne 'x' oraz 'y'.

A więc jest sobie na stronce button po kliknięciu na który textboxy mają być dodawane i kolejno otrzymywać inne name oraz id (np.: x1,x2,y1,y2 itd) ze względu na dalszą obsługę przez interpreter php. Czyli pierwsze kliknięcie = jeden textbox X oraz Y. Dziesięć kliknięć na button = 10x textbox X oraz 10x textbox Y.

Z wcześniejszego tematu na forum dowiedziałem się mniej więcej jak dodawać przez JS elementy HTML - jednak nadal nie do końca to "kminię".

Przykładowy kod dodający buttona, wyszperany w sieci:

[HTML] pobierz, plaintext 
<button onclick="myFunction()">Try it</button>
 
<script>
 
function myFunction()
{
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
};
 
</script>
[HTML] pobierz, plaintext 

Mi chodzi dokładnie o coś takiego, z tym, że chcę, aby kolejne textboxy otrzymywały inne 'name' oraz 'id'. Może ktoś zna jakiś ciekawy tutorial odnośnie tego zagadnienia, bo ja się w google naszperałem, a w kursach online po prostu tego brakuje.

Jak ma wyglądać ta strona (wrzuć jakiś link, albo choćby projekt w *.jpg)


textbox to znaczy co dokładnie? Ten kod, który podałeś powinien utworzyć przyciski HTML. (ale to tylko kwestia odpowiedniego tagu, w tym kodzie masz <button>. Może chodziło ci o <input type="text" /> ?)


id podmieniasz np. tak:


name chyba też (ale nie jestem pewien):


żeby zmienić współrzędne przycisku dany element musi mieć CSS position:absolute (albo inne, chodzi o to żeby nie było statyczne), a potem w JS:


albo w jQuery, mniej pisania, ale na to samo wychodzi (jQuery po prostu oszczędza klawiaturę, ale nie zwalnia z obowiązku wiedzy o tym, jak działa CSS czy DOM).

PS.
żeby w id były współrzędne:
btn.id = "przycisk-" + x + "-" + y;

np. "przycisk-100-200" (x, y powinny być liczbami całkowitymi).

super, dzięki za wskazówki;) Dokładnie mówiąc o textbox'ie chodzi mi właśnie o <input type="text" />
Wklepałem sobie:

[HTML] pobierz, plaintext 
var btn=document.createElement("INPUT");
	btn.name = "przycisk";
	btn.id = "przycisk";
	document.body.appendChild(btn);
[HTML] pobierz, plaintext 

i działa:) Pytanie tylko skąd javascript wie, żeby generować type "text" skoro tego nie podałem? Przecież nie podałem <input type="text" />, więc równie dobrze może to być button/submit/checkbox/radio itp itd


Na kwestię id/name miał bym pomysł, dzięki któremu odbiór i późniejsza obróka informacji byłaby łatwiejsza. Wystarczyłoby wrzucić zmienna licznikowa, która zliczałaby ilość tych klików na button w wyniku czego każdy input typu "text" nazywał by się np. "text"+i+"". Później w php mógłbym napisać pętelkę for (i=1; i<=licznik; i++) {odebrać elementy z tablicy $_POST i wykonać na niej działanie}. Kwestia jest taka, że nie bardzo wiem jak ten licznik zaimplementować. Jeśli chodzi o zwykłą Jave to deklarowanie zmiennych nie inicjowanych żadnymi wartościami, kończyło się tym, że miały one wartości domyśle. Czyli np. int a; powodowało, że a posiadało 0. Wystarczyło sobie dopisać do obsługi button'a 'a=a+1;' i grało, natomiast w javascript wartości niezainicjalizowana posiada wartość "undefined", a więc muszę na początku dodać np. var a=0; w wyniku czego za każdym kliknięciem zmienna ta będzie zawsze inicjalizowana od nowa i nie zmieni wartości. No i koniec końców nie wiem jak w JS doprowadzić do tego, żeby wartość kliknięć była zliczana:( Any idea?

odpowiedź na Twoje pytanie:

[HTML] pobierz, plaintext 
<input />
[HTML] pobierz, plaintext 

zobacz co się stanie

pewnie domyślnie, ale nie polegałbym na tym bo nie wiadomo jak w różnych przeglądarkach będzie. Lepiej dopisać




JavaScript nie pochodzi od Javy więc nie idź tym tropem. Najbliżej JS do ActionScripta (którego się używa przy aplikacjach Flash).


w JavaScript są różne zasięgi zmiennych. Możesz zadeklarować zmienną poza daną funkcją, i też będzie widoczna.

setAttribute() - size/maxlength itp widzę, że też można modyfikować, a więc kolejne pieczenie przy jednym ogniu upichciłem:D


A więc tylko nazwa wspólna:)


I tu był pies pogrzebany. Kombinowałem jak cholera, a rozwiązanie trywialne

Jutro pobawię się jeszcze, być może nowe pytania się nasuną. Póki co dziękuję za wyczerpujące wypowiedzi


--@EDIT--
No i mam jeszcze kilka pytań. Po pierwsze pozycjonowanie textbox'u wydaje się nie działać - przynajmniej u mnie nie pozycjonuje, gdy wrzucę sobie coś takiego:

[PHP] pobierz, plaintext 
<script type="text/javascript">
 
var licznik=0;
function dodaj()
{	
	licznik++;
	var obj = document.createElement("INPUT");
	obj.setAttribute('type', 'text');
	obj.setAttribute('size', '2');
	obj.setAttribute('maxlength', '2');
	obj.name = "od"+licznik;
	obj.id = "od"+licznik;
	obj.style.left = "500px";
	obj.style.top = "500px";
	var objSec = document.createElement("INPUT");
	objSec.setAttribute('type', 'text');
	objSec.setAttribute('size', '2');
	objSec.setAttribute('maxlength', '2');
	objSec.name = "do"+licznik;
	objSec.id = "do"+licznik;
	objSec.style.left = "600px";
	objSec.style.top = "500px";
	document.body.appendChild(obj);
	document.body.appendChild(objSec);
 
}
</script>
[PHP] pobierz, plaintext 

Kolejne pytanie brzmi: Jak może poprzez JS wywołać składnię html:
a ) <center></center>
b ) <label></label>
c ) <br />, żeby zrobić sobie pętelke, która za każdym kliknięciem będzie robić przejście do nowej lini, w wyniku czego nie będę miał generowanych elementów w ciągu (jednej lini)

Bo musisz mieć w stylach ustawione position:absolute (albo inne, nie statyczne):




Tak samo. Niezależnie od tego czy jest to element zamykany od razu <br /> czy taki, który może mieć dzieci <div>, </div> robisz tak samo.

Poza tym, możesz też operować na innerHTML, coś a la:

No ok, ale na przykładzie center:

[PHP] pobierz, plaintext 
var cent = document.createElement("CENTER");
	document.body.appendChild(obj);
	document.body.appendChild(objSec);
	var ent = document.createElement("BR");
	document.body.appendChild(ent);
[PHP] pobierz, plaintext 

skąd skrypt będzie wiedział kiedy zamknąć <center> ? Pewnie ja nie rozumuję poprawnie. createElement tworzy element, zaś fizycznie wstawienie go odbywa się poprzez appendChild tak? Zatem jeśli zaraz po zadeklarowaniu zmiennej cent umiejscowie appendChild wówczas powinno odbyć się 'wyśrodkowanie' wszystkiego tak? Bo generalnie wstawiam to i mimo wszystko nic nie wyśrodkowuje...no i co z elementem zamykającym? Wtedy zrobić var cent = document.createElement("/CENTER");



Oooo to jest coś bardziej czytelnego i zrozumiałego. Wrzuciłem prosty test i niestety, ale po zastosowaniu funkcji innerHTML i kliknięciu na button moim oczom okazuje się nowa strona zastępująca poprzednią, a co za tym idzie nie mam możliwości po raz kolejny klikania na button czy wpisywaniu dalszych informacji.

document.createElement("center") tworzy Ci "kontener" do którego możesz dopiero ładować inną zawartość, która zostanie wyśrodkowana... samo takie wywołanie + appendChild do body spowoduje umieszczenie następującego kodu:

[HTML] pobierz, plaintext 
<center></center>
[HTML] pobierz, plaintext 

no to w takim razie jak do tego kontenera załadować zawartość, która ma zostać wyśrodkowana? Bo sama regułka niewiele mi mówi:(

no nie, bo dokument HTML ma strukturę hierarchiczną i pośrodkuje się tylko to co jest w danym pojemniku.


nie. Jak robisz createElement to automatycznie tworzy on również zamykający tag. Myśl o tym jak o obiektach, bo zasadniczo tak jest - jest to programowanie obiektowe - tworzysz obiekty(createElement), dodajesz je do drzewa dokumentu (appendChild), ale możesz też wsadzać jeden obiekt w drugi i tworzyć bardziej skomplikowaną hierarchię.

A więc reasumując jak dokładnie to zrobić, bo nadal nie rozkminiłem tego (poza teoria zagnieżdżenia jednego appendChild'a w drugim)
Na moim przykładzie jak powinno wyglądać umieszczenie generowanych inputów wewnątrz tagu <center></center>?

[PHP] pobierz, plaintext 
<input type="button" value="Dodaj" id="dodajp" onClick="dodaj()" />
 
<script type="text/javascript">
 
var licznik=0;
function dodaj()
{	
	licznik++;
	var obj = document.createElement("INPUT");
	obj.setAttribute('type', 'text');
	obj.setAttribute('size', '2');
	obj.setAttribute('maxlength', '2');
	obj.name = "od"+licznik;
	obj.id = "od"+licznik;
 
	var objSec = document.createElement("INPUT");
	objSec.setAttribute('type', 'text');
	objSec.setAttribute('size', '2');
	objSec.setAttribute('maxlength', '2');
	objSec.name = "do"+licznik;
	objSec.id = "do"+licznik;
 
	var cent = document.createElement("CENTER");
	document.body.appendChild(obj);
	document.body.appendChild(objSec);
	var ent = document.createElement("BR");
	document.body.appendChild(ent);
 
}
</script>
[PHP] pobierz, plaintext 

Chyba należę do tych "ciężej rozumujących" - muszę zobaczyć, bo nie "skapuję" tego:(

no, normalnie:
cent.appendChild(obj);
cent.appendChild(objSec);


w przeglądarkach są tzw. narzędzia dla developerów, Ctrl+Shift+J w Google Chrome, w Firefoxie i IE - F12 (w FF jak masz wtyczkę Firebug), w Operze Ctrl + Shift + I. I tam możesz "zobaczyć" strukturę dokumentu i wszystko generalnie co ci się wyprodukowało w JS.

poza tym w JS jest coś takiego jak pętla for, bo teraz dublujesz kod niepotrzebnie tworząc 2 inputy.

heh...a ja szukalem i kombinowałem coś w stylu dodanie parametru w () dla appedChild'a


Tak wiem wiem:D Pisałem coś tam w C#, PHP i jeszcze kilku językach i pętle/instrukcje warunkowe itp są raczej nieodzowną częścią każdego języka programowania:P