0

onblur ハンドラーが呼び出され、switch が実行されます。それでも、指定された要素は変更されません。

javascript を使用して以下の HTML で要素スタイルを「none」/「block」に設定しようとすると、何が問題になりますか?

<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
    <title>Randomage</title>
    <link rel="shortcut icon" href="//ssl.gstatic.com/docs/spreadsheets/forms/favicon_jfk.png" type="image/x-icon">
    <link href="http://spreadsheets.google.com/client/css/779923916-published_form_compiled.css" type="text/css" rel="stylesheet">
    <style type="text/css">@media print{@page {size:A5}body{padding:0;background-color:#fff}.ss-form-container{width:100%;border:none}}h2.ss-section-title{background-color:transparent}div.ss-submit div.ss-form-entry{background:none;border:none}</style>
  </head>
  <body class="ss-base-body" dir="ltr" itemscope=""
    itemtype="http://schema.org/CreativeWork/FormObject">    
    <h3>Please fill in the form below</h3>
    <br>
    <div class="ss-required-asterisk">* Required</div>
    <div class="ss-form">
      <form id="halfyly_edit">
        <div class="errorheader"><b>Looks like you have a question or two that still needs to be filled out.</b></div>
        <table style=" text-align: left; width: 75%;" border="0" cellpadding="2" cellspacing="2">
          <tbody>
            <tr>  
              <td style="align:center;"><br>
                <div class="errorbox-bad">
                  <div class="ss-item ss-item-required ss-select">
                    <div class="ss-form-entry"> <label
                        class="ss-q-title" for="entry_16">Options <span class="ss-required-asterisk">*</span></label>
                      <label class="ss-q-help" for="entry_16"></label>
                      <select name="entry.16.single" id="entry_16" onblur="doSelect();">
                        <option value="sel0">Select 0</option>
                        <option value="sel1">Select 1</option>
                      </select>
                    </div>
                  </div>
                </div>
              </td>
              <td style="align:center;" >
                <div class="errorbox-good" id="entry_17_div"> <br>
                  <div class="ss-item ss-text">
                    <div class="ss-form-entry"> <label
                        class="ss-q-title" for="entry_17">Option 0
                      </label> <label class="ss-q-help" for="entry_17">A quick brown fox jumps over the lazy dog</label> <input name="entry.17.single"
                        value="" class="ss-q-short" id="entry_17"
                        type="text"> 
                    </div>
                  </div>
                </div>
               </td>
              <td style="align:center;">
                <div class="errorbox-good" id="entry_18_div"> <br>
                  <div class="ss-item ss-text">
                    <div class="ss-form-entry"> <label
                        class="ss-q-title" for="entry_18">Option 1</label> <label class="ss-q-help"
                        for="entry_18">The quick brown dog jumps over a lazy fox</label> <input
                        name="entry.18.single" value=""
                        class="ss-q-short" id="entry_18" type="text"> 
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td> 
                    <input name="pageNumber" value="" type="hidden"> 
                    <input name="backupCache" value="" type="hidden">
                <div class="ss-item ss-navigate">
                  <div class="ss-form-entry"> 
                    <input name="submit" value="Submit" type="submit" disabled> 
                  </div>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </form>
  </div>
  <script type="text/javascript">
        function doSelect(){

                var entry_16 = document.getElementById('entry_16');                

                switch( entry_16.selectedIndex ){


                case 0: 
                    // Option 0
                    document.getElementyById('entry_18_div').style.display = "none";                
                    document.getElementyById('entry_17_div').style.display = "block";
                    break;
                case 1:
                    // Option 1
                    document.getElementyById('entry_18_div').style.display = "block";
                    document.getElementyById('entry_17_div').style.display = "none";
                    break;
                }
        }

  </script>
</body>
</html>
4

2 に答える 2

1

4 つのタイプミスがあります:getElementyByIdデフォルトの DOM 要素の JavaScript メソッドではありません (存在しません)。それらを に置き換えgetElementByIdます。

その場合、関数はイベントで正しく実行されonblurます。JSFiddle

onchangeページをより動的にしたい場合は、代わりにイベントで呼び出すことをお勧めします。例

また、コードをテストするときは、Javascript コンソール (Chrome/IE: F12、Firefox: Ctrl+Shift+K) を確認してください。:)

于 2012-05-31T06:15:31.453 に答える
1

JavaScript のスペルが間違っています:

document.getElementById('entry_18_div').style.display = "none";
于 2012-05-31T06:19:57.923 に答える