Home/ Questions/Q 7749927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:09:30+00:00

This is probably a dum error that can be fixed in seconds but have

  • 0

This is probably a dum error that can be fixed in seconds but have been looking for a while and dont know how to make it work

I essentially had this code
`

  <!DOCTYPE html>
   <html>
   <head>
   <style>
   .box,
   button { float:left; margin:5px 10px 5px 0; }
   .box { height:80px; width:80px; background:#090; }
   #log { clear:left; }

   </style>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
   </head>
   <body>

   <button id="btn1">fade out</button>
   <button id="btn2">show</button>

   <div id="log"></div>

   <div id="box1" class="box">linear</div>
   <div id="box2" class="box">swing</div>

   <script>
   $("#btn1").click(function() {
     function complete() {
       $("<div/>").text(this.id).appendTo("#log");
     }

     $("#box1").fadeOut(1600, "linear", complete);
     $("#box2").fadeOut(1600, complete);
   });

   $("#btn2").click(function() {
    $("div").show();
     $("#log").empty();
   });

   </script>

   </body>
   </html>

`
So then I wanted to make it work in wordpress so I moved the style to a css and the to the footer.php as you can see here

`

                <?php wp_enqueue_script("jquery"); ?>
                <script>
$("#btn1").click(function() {
function complete() {
$("<div/>").text(this.id).appendTo("#log");
}

$("#box1").fadeOut(1600, "linear", complete);
$("#box2").fadeOut(1600, complete);
});

$("#btn2").click(function() {
$("#box1").show();
$("#box2").show();
$("#log").empty();
});

</script>

`

http://testdomain.edgardoroldanonline.com/testpage/

But it does not work I have placed the wp_enquenue and everything I could see as a potential problem like interference on different versions of jquery but dont know what is causing the problem the only thing I know is that one time I put the line within the pages html code and it worked. Until the visual editor got rid of it

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a javascript error.

    /testpage/:233 Uncaught TypeError: Cannot call method ‘click’ of null

    You need to initialize jQuery

    jQuery(function(){
    jQuery("#btn1").click(function() {

        function complete() {
          jQuery("<div/>").text(this.id).appendTo("#log");
        }

        jQuery("#box1").fadeOut(1600, "linear", complete);
        jQuery("#box2").fadeOut(1600, complete);
    });

    jQuery("#btn2").click(function() {
    jQuery("#box1").show();
    jQuery("#box2").show();
    jQuery("#log").empty();
    });
});
    • 0