Question

调用onblur处理程序，并执行切换。然而，指定的元素保持不变。

尝试使用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>

Answer 1

你有4个拼写错误：getElementyById不是默认的DOM元素javascript方法（不存在）。将其替换为getElementById。

您的功能将在onblur事件中正确执行。的 JSFiddle

如果您希望自己的网页更具动态性，我建议您在onchange活动中调用它。的 Example

另外，在测试代码时，请检查您的Javascript控制台（Chrome / IE：F12，Firefox：Ctrl + Shift + K）。：）

Answer 2

你的javascript拼写错误了：

document.getElementById('entry_18_div').style.display = "none";

为什么浏览器在脚本中将样式更改为block / none后不显示/隐藏div？

2 个答案: