Obecnie uczę się na HTML, PHP, JavaScript i inne zabawne rzeczy internetowe. W tym momencie udało mi się stworzyć ładny formularz internetowy z HTML, CSS i PHP.

Niektóre dni temu chciałem dodać kilka dynamicznych opcji z JavaScript, ale teraz uderzam w ścianę. Zamiast mieć moją formę zapisaną w pliku HTML, postanowiłem umieścić go w pliku .js i mieć go zbudowany przez javascript. Oto jak to robię:

<!-- Insert the form into <div id=field> -->
...
document.getElementById(field).innerHTML +=
'<label>Name'
   +'<span class="small">ex: stg_testdb1</span>'
+'</label>'
+'<input type="text" name="name" id="name" />';

document.getElementById(field).innerHTML +=
'<label>Layer</layer>'
 +'<span class="small">ex: stg_testdb1</span>'
 +'<select name="layer" id="layer"/>'
   +'<option value="Development">D</option>'
   +'<option value="QA">A</option>'
   +'<option value="Staging">S</option>'
   +'<option value="Production">P</option>';
 +'</select>';
....

I oto mój kod CSS dla "Wybierz", "Wejście" i "Etykieta" Tagi

#stylized select{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:145px;
float:left;
}

Kiedy piszę moją formę w czystym HTML, wszystko działa idealnie. Oto zdjęcie części formularza:

Working fine in pure html

Ale kiedy piszę go w JavaScript przy użyciu InnerHTML + = Wszystko wydaje się działać dobrze z wyjątkiem kropli (pole Wybierz):

Not working fine with javascript

Jestem trochę zdezorientowany, ponieważ CSS pozostanie dokładnie tak samo. Ponadto, jeśli spróbuję dodać kolejne pole tekstowe pod pierwszym, wszystko będzie dobrze i dobrze ukształtowane.

Ponieważ jestem nowy w rozwoju sieci, chyba brakuje czegoś dużego? Również jestem pewien, że wstawianie kodu, który robię, nie jest właściwą rzecz do zrobienia, ale na razie prawie działa dobrze;)

0
Cocotton 12 wrzesień 2012, 17:37

2 odpowiedzi

Najlepsza odpowiedź

Nie wiem, czy to rozwiązanie, ale w JS, jest:

<label>Layer</layer>

Myślę, że miałeś na myśli

<label>Layer</label>
1
Mageek 12 wrzesień 2012, 13:52

W pytaniu nie ma wystarczającej ilości informacji, aby ponownie utworzyć problem (brakuje wielu CSS i prawdopodobnie HTML). Jednak ponieważ znasz CSS, nie zmieniają się, musi być niektóre z miejsca HTML.

Sposób, w jaki twój JavaScript tworzy elementy HTML muszą różnić się od statycznego HTML. Otwórz obie strony w oddzielnych oknach i użyj Firebug (dla Firefoksa) lub narzędzi deweloperowych (w Chrome), aby sprawdzić wygenerowany HTML dla każdej strony (karta HTML / Elements). Znajdź różnicę i popraw ją w JavaScript.

Najprawdopodobniej właśnie wpisałeś lub źle umieszczony element lub dwa.

Mam nadzieję że to pomoże.

0
Travis 12 wrzesień 2012, 13:50