[js] innerHTML inputow z liczba porzadkowa

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
tatu
Nowy
Nowy
Posty: 89
Rejestracja: śr lut 09, 2005 1:58 pm

[js] innerHTML inputow z liczba porzadkowa

Post autor: tatu »

witam,
mam taki kulawy kod js, a chcialbym, zeby kazdorazowo po kliknieciu w link wyswietlalo sie pole input z kolejna liczba w atrybucie name.
probowalem zamknac to w petli, ale mi nie wyszlo, bo input dodaje sie tylko raz i nie wiem czemu name zwraca getem wartosc 9
z gory dziekuje za pomoc i serdecznie pozdrawiam

Kod: Zaznacz cały

<head>    
    <title>inputy</title>    
    <script type="text/javascript" language="javascript" >            
    function input() {        
        for(i=0;i<10;i++){
            var allTags = document.getElementById('inputuj');
            var inputuj = "<input type='text' name='inputuj["+i+"]' value='' /><br/>";
            allTags.innerHTML = inputuj;
        }				    	
    }
    </script>
</head>
<body>
    <a href="#" onclick="input();">inputuj</a>
    <form name="inputuje" action="get">
        <div id="inputuj"></div>
    <input type="submit" name="submit" value="ok" />
    </form>    
</body>
gorylek
Zaczyna działać
Zaczyna działać
Posty: 427
Rejestracja: śr gru 19, 2007 7:29 pm

Re: [js] innerHTML inputow z liczba porzadkowa

Post autor: gorylek »

Witam,
problem jest dość prosty ale można zapomnieć o takim drobiazgu:

Kod: Zaznacz cały

<head>
    <title>inputy</title>
    <script type="text/javascript" language="javascript" >
var i=1;
    function input() {
            var allTags = document.getElementById('inputuj');
            var inputuj = "<input type='text' name='inputuj["+i+"]' value='' /><br/>";
            allTags.innerHTML += inputuj;
            i++;
    }
    </script>
</head>
<body>
    <a href="#" onclick="input();">inputuj</a>
    <form name="inputuje" action="get">
        <div id="inputuj"></div>
    <input type="submit" name="submit" value="ok" />
    </form>
</body>
Jak widzisz, zamiast allTags.innerHTML = inputuj; zastosowałem allTags.innerHTML += inputuj;. Twój problem polegał na tym że innerHTML = wartosc; zastępuje wartość która już istnieje czyli poprzedni INPUT był zastąpiony przez nowy. Operator += sprawia że kolejna wartość zostaje dodana do poprzedniej.
Wywaliłem również pętle a zamiast niej dałem poza funkcją zmienną "i" której wartość wynosi 1. Każde kolejne dodanie pola INPUT zmienia wartość o jeden poprzez zapis i++;.

Pozdrawiam
Gorylek
ODPOWIEDZ