[JavaScript]Dodawanie kolejnych textboxów po kliknięciu na button Opcje

[danon198901]

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.

[PrinceOfPersia]

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

2 nowe textboxy obrazujące współrzędne 'x' oraz 'y'.

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" /> ?)

kolejno otrzymywać inne name oraz id

id podmieniasz np. tak:

Kod

var btn=document.createElement("BUTTON");
btn.id = "przycisk-1";

name chyba też (ale nie jestem pewien):

Kod

btn.name = "przycisk-1";

ż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:

Kod

var x = 120; // wspolrzedne przycisku
var y = 250;
btn.style.left = x + "px";
btn.style.top = y + "px";

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


Ten post edytował PrinceOfPersia 23.03.2013, 21:33:36