0

ドロップダウン選択でラベルとテキストボックスを非表示/表示しようとしています。

だから私はいいえが選択されているので、それ以外は表示したくありません

1を選択した場合、ラベルを1つ、テキストボックスを1つ表示したい 2を選択した場合、ラベルを2つ、テキストボックスを2つ表示したい

私は何を間違っていますか？

<!DOCTYPE html>
<html>
<head>
<script>
function checkvalue(val)
{
if(val==="No")
{
   document.getElementById('guest_label').style.display='none';
   document.getElementById('guest_name1').style.display='none'; 
   document.getElementById('guest_label').style.display='none';
   document.getElementById('guest_name2').style.display='none';
}

 else  if(val==="1")
{
   document.getElementById('guest_label').style.display='block';
   document.getElementById('guest_name1').style.display='block';
 }
 else 
 {
   document.getElementById('guest_label').style.display='block';
   document.getElementById('guest_name1').style.display='block';
   document.getElementById('guest_label').style.display='block';
   document.getElementById('guest_name2').style.display='block';
 }
   }
 </script>
 </head>
<body>

 <label for="guest_number">Any Guest: </label>
  <select name="guest" onchange='checkvalue(this.value);'> 



                <option value="No" selected >No</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>


 <label for="guest_label" style='display:none'>Other Guest Name: </label>
 <input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
 </html>

ありがとう

4

3 に答える 3

1

2 番目のラベル タグを

<label for="guest_label" style='display:none'>Other Guest Name: </label>

に

<label id="guest_label" style='display:none'>Other Guest Name: </label>

document.getElementById('guest_label') .style.display='none';ID が「guest_label」である要素が見つからない場合、JavaScript コードは失敗します。

document.getElementById('guest_label') は null を返し.style、null 値を呼び出すことはできません。

修正したものを確認してください。

于 2015-09-22T16:15:33.837 に答える
0

投稿したコードが不完全でない限り、id "guest_label" を持つ要素はありません。JS は、null であるその ID を持つ要素のプロパティを参照しようとしたときにエラーを返しました。

于 2015-09-22T16:12:08.207 に答える
0

guest_label1 と guest_label2 の ID を含める必要があり、1 のトグル guest_label2 が選択されています。

<script>
function checkvalue(val)
{
if(val=="No")
{
   document.getElementById('guest_label1').style.display='none';
   document.getElementById('guest_name1').style.display='none'; 
   document.getElementById('guest_label2').style.display='none';
   document.getElementById('guest_name2').style.display='none';
}

 else  if(val==="1")
{
   document.getElementById('guest_label1').style.display='block';
   document.getElementById('guest_name1').style.display='block';
  document.getElementById('guest_label2').style.display='none';
   document.getElementById('guest_name2').style.display='none';
 }
 else 
 {
   document.getElementById('guest_label1').style.display='block';
   document.getElementById('guest_name1').style.display='block';
   document.getElementById('guest_label2').style.display='block';
   document.getElementById('guest_name2').style.display='block';
 }
   }
 </script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
  <select name="guest" onchange='checkvalue(this.value);'> 



                <option value="No" selected >No</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>


 <label id="guest_label1" for="guest_label" style='display:none'>Other Guest Name: </label>
 <input type="text" name="guest_name" id="guest_name1" style='display:none'/>
  <label id="guest_label2" for="guest_label" style='display:none'>Other Guest Name: </label>
<input  type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>
于 2015-09-22T16:17:47.973 に答える