This code is working in snippet but not in blogger

Question

This is my blog i have added the code like below in my blog. The below code is working correctly in snippet like in the example below but it is not working correctly in my blog which i use it in blogger platform should i use any jquery library to make it work. See the snippet below it is working fine in the snippet. my aim is to hide one widget if another widget displays but 2 widget displayed same time in my blog. example fiddle is working fine

<script type="text/javascript">
var control1VisibleCheck = function () {
  var now = new Date();
  //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
  if (now.getSeconds() % 20 == 0)    //I'd like to show control1 on even minutes
    return true;
  return false;
}

if (control1VisibleCheck())
  document.getElementById('multi-search-groups').style.display = 'none';
else
  document.getElementById('multi-search').style.display = 'none';
</script>



<div id="multi-search">
  <select id="cmbColumn" name="cmbColumn">
    <option value="" />Columns
    <option value="apple+" />apple
    <option value="grapes+" />grapes
  </select>
  <select id="cmbSidebar" name="cmbSidebar">
    <option value="" />Sidebars
    <option value="mango+" />mango
    <option value="berry+" />berry

  </select>
</div>

<div id="multi-search-groups">
  <em>Multiple Select with Groups</em><br />
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value="" />
    <optgroup label="NFC EAST">
      <option />Dallas Cowboys
      <option />New York Giants
      <option />Philadelphia Eagles
      <option />Washington Redskins
    </optgroup>
  </select>
</div>

<!--div id="control1" style="width: 200px; height: 100px; background-color: red;">
</div>
<div id="control2" style="width: 200px; height: 100px; background-color: green;">
</div-->

The below code is working fine

 var control1VisibleCheck = function () { var now = new Date(); //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need if (now.getSeconds() % 2 == 0) //I'd like to show control1 on even minutes return true; return false; } if (control1VisibleCheck()) document.getElementById('multi-search-groups').style.display = 'none'; else document.getElementById('multi-search').style.display = 'none'; 

 <div id="multi-search"> <select id="cmbColumn" name="cmbColumn"> <option value="" />Columns <option value="apple+" />apple <option value="grapes+" />grapes </select> <select id="cmbSidebar" name="cmbSidebar"> <option value="" />Sidebars <option value="mango+" />mango <option value="berry+" />berry </select> </div> <div id="multi-search-groups"> <em>Multiple Select with Groups</em><br> <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6"> <option value=""></option> <optgroup label="NFC EAST"> <option>Dallas Cowboys</option> <option>New York Giants</option> <option>Philadelphia Eagles</option> <option>Washington Redskins</option> </optgroup> </select> </div> <!--div id="control1" style="width: 200px; height: 100px; background-color: red;"> </div> <div id="control2" style="width: 200px; height: 100px; background-color: green;"> </div--> 

Answer 1

Seems your fiddle doesnt work correctly either, as suggested in the comments execute your JavaScript after the page (document) is ready:

JavaScript document ready function

(function() {
    // your code here
});

full JavaScript:

(function() {
    var control1VisibleCheck = function () {
      var now = new Date();
      //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
      if (now.getMinutes() % 2 == 0)    //I'd like to show control1 on even minutes
        return true;
      return false;
    }

    if (control1VisibleCheck())
      document.getElementById('multi-search-groups').style.display = 'none';
    else
      document.getElementById('multi-search').style.display = 'none';
});

Working JSFiddle

Answer 2

Solved! i added my <script> after </div> tag it worked like below is my code which i have got in my blog .

I got result what i want i mean if one widget is hided and another widget to be shown to show for this i used if (now.getSeconds() % 2 == 0) the below is my full code which i have added in my blog. I have just changed i mean i have added the script tag after div it worked.

<div id="multi-search">
  <select id="cmbColumn" name="cmbColumn">
    <option value="" />Columns
    <option value="apple+" />apple
    <option value="grapes+" />grapes
  </select>
  <select id="cmbSidebar" name="cmbSidebar">
    <option value="" />Sidebars
    <option value="mango+" />mango
    <option value="berry+" />berry

  </select>
</div>

<div id="multi-search-groups">
  <em>Multiple Select with Groups</em><br />
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value="" />
    <optgroup label="NFC EAST">
      <option />Dallas Cowboys
      <option />New York Giants
      <option />Philadelphia Eagles
      <option />Washington Redskins
    </optgroup>
  </select>
</div>


<script type="text/javascript">
var control1VisibleCheck = function () {
  var now = new Date();
  //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
  if (now.getSeconds() % 2 == 0)    //I'd like to show control1 on even minutes
    return true;
  return false;
}

if (control1VisibleCheck())
  document.getElementById('multi-search-groups').style.display = 'none';
else
  document.getElementById('multi-search').style.display = 'none';
</script>