0

私は現在、HTML、PHP、JavaScript、その他の楽しいWebに関することを学んでいます。この時点で、HTML、CSS、PHPをすべて使用して素敵なWebフォームを作成することができました。

数日前、JavaScriptでいくつかの動的オプションを追加したかったのですが、今は壁にぶつかっています。フォームをhtmlファイルに書き込む代わりに、フォームを.jsファイルに入れて、javascriptでビルドすることにしました。これが私がそれをしている方法です:

<!-- 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>';
....

これが「select」、「input」、「label」タグのCSSコードです。

#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;
}

フォームを純粋なHTMLで作成すると、すべてが完全に機能します。これがフォームの一部の写真です:

純粋なhtmlで正常に動作する

しかし、innetHTML + =を使用してJavaScriptで記述すると、ドロップボックス(選択フィールド)を除いてすべてが正常に機能しているようです。

javascriptで正常に動作しない

cssはまったく同じままなので、少し混乱しています。また、最初のテキストフィールドの下に別のテキストフィールドを追加しようとすると、すべてが正常にフォーマットされます。

私はWeb開発に慣れていないので、何か大きなものが欠けていると思いますか?また、私が行っているようにコードを挿入することは正しいことではないと確信していますが、今のところ、ほとんどうまく機能しています;)

4

2 に答える 2

1

それが解決策かどうかはわかりませんが、JSには次のようなものがあります。

<label>Layer</layer>

私はあなたが意味したと思います

<label>Layer</label>
于 2012-09-12T13:52:24.490 に答える
0

問題を再現するための十分な情報が質問にありません(多くのCSSとおそらくHTMLが欠落しています)。ただし、CSSが変更されていないことがわかっているため、HTMLが適切でない可能性があります。

JavaScriptがHTML要素を作成する方法は、静的HTMLとは異なる必要があります。両方のページを別々のウィンドウで開き、Firebug(Firefoxの場合)またはDeveloper Tools(Chromeの場合)を使用して、各ページに対して生成されたHTMLを検査します([HTML /要素]タブ)。違いを見つけて、JavaScriptで修正してください。

ほとんどの場合、要素の入力を間違えたり、配置を間違えたりしただけです。

お役に立てれば。

于 2012-09-12T13:50:21.763 に答える