Home/ Questions/Q 8029487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T00:27:05+00:00

The onblur handler is invoked, and the switch executed. Yet the specified elements remain

  • 0

The onblur handler is invoked, and the switch executed.
Yet the specified elements remain unchanged.

What is wrong in the attempt to set element style to ‘none’/’block’ in the HTML below using javascript? 

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have 4 typo’s: getElementyById isn’t a default DOM element javascript method (doesn’t exist). Replace those by getElementById.

    Your function will be correctly executed in the onblur event then. JSFiddle

    I’d suggest calling it in the onchange event instead, if you want your page to be more dynamic. Example

    Also, check your Javascript console (Chrome/IE: F12, Firefox: Ctrl+Shift+K) when testing your code. 🙂

    • 0