[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]

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

Kod

obj.style.position = "absolute";

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)

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:

Kod

document.body.innerHTML += '<input type="text" size="2" maxlength="2" style="position:absolute;left:500px;top:500px" id="od'  + licznik + '"  />';