How to call Javascript using button

Question

Using CMS Wordpress, I have a file light.js and its directory is- wordpress ...themes/mytheme/js/light.js. This is a script of light.js:

$(document).ready(function(){$("#lightsoff").click(function(){$("body").prepend('<div id="fader" style="position: absolute; 
z-index: 1000; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.7); width: '+document.body.clientWidth+'px; height: '+document.body.clientHeight+'px; display: none;"></div>');$("#embed_holder").css("z-index","2000");$("#fader").fadeIn(500,function(){$("body")
.prepend('<div id="fader-message" style="position: absolute; z-index: 1100; top: 370px; left: 200px; 
color: #fff; font-size: 18px; font-family: Calibri;">Klik dimana saja pada layar untuk mematikan mode gelap.</div>');
$("#fader").bind("click",function(){$("#fader-message")
.fadeOut(1000,function(){$("#fader-message")
.remove();$("#fader").fadeOut(500,function(){$("#fader").remove();$("#embed_holder").css("z-index","0");});});});});});});

then I created a function in function.php like this:

function lightsoff() {
      wp_enqueue_script('jquery');
      wp_enqueue_script('themesscript', get_template_directory_uri() . '/js/light.js', array('jquery'));    
}
add_action('wp_enqueue_scripts', 'lightsoff');

In my post in wordpress, i'm trying to call function lightsoff with this script:

<a href="javascript:void(0)" onclick="lightsoff()">Mode Gelap</a></div>

I checked that light.js file has been read when the posting page is opened in source code my web:

<script type='text/javascript' src='http://....../wp-content/plugins/wp-shortcode/js/jquery.tipsy.js?ver=4.7'></script>

but when i click the Mode Gelap, no effects occur. which part is wrong? Please help me.

You can't call a PHP function from JS. Try adding id="lightsoff" to your anchor tag. — cbronson, Jan 03 '17 at 00:46
Also check browser console for errors. Normally `$` is undefined in wordpress due to use of `noConflict()` and you would need to wrap your code in an IIFE to insulate `$` — charlietfl, Jan 03 '17 at 00:47
@DanFarrell : Thanks for reply. I'm sorry.. can you explain the details? because I am still a beginner — Andi. S, Jan 03 '17 at 00:51
@cbronson: can you explain the delail for me? I want to try your method. I'm very confused — Andi. S, Jan 03 '17 at 00:57
You don't need AJAX. Just change your button to this: `Mode Gelap` — , Jan 03 '17 at 01:00
@ChrisG : i have try Mode Gelap or Mode Gelap, but still no efect — Andi. S, Jan 03 '17 at 01:06
Your light.js looks pretty messy, did you check the console for errors, like charlietfl suggested? — , Jan 03 '17 at 01:07

score 1 · Answer 1 · answered Jan 03 '17 at 07:51

You have created lightsoff() function in function.php so lightsoff is php fucntion not js function so you can't call it like this

<a href="javascript:void(0)" onclick="lightsoff()">Mode Gelap</a></div>

Now the solution is create your lightsoff function in JavaScript. Here is code.

$(document).ready(function(){
    function lightsoff() {
          wp_enqueue_script('jquery');
          wp_enqueue_script('themesscript', get_template_directory_uri() . '/js/light.js', array('jquery'));    
    }
});

Put your lightsoff() function inside

$(document).ready(function(){  
});

As i mentioned above.

score 0 · Answer 2 · answered Jan 03 '17 at 06:36

Something like this?

jQuery(document).ready(function($) {

  $("#lightsoff").click(function() {
    $("body").prepend('<div id="fader" style="position: absolute; z-index: 1000; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.7); width: ' + document.body.clientWidth + 'px; height: ' + document.body.clientHeight + 'px; display: none;"></div>');
    $("#embed_holder").css("z-index", "2000");
    $("#fader").fadeIn(500, function() {
      $("#fader").prepend('<div id="fader-message" style="color: #fff; font-size: 18px; font-family: Calibri;">Klik dimana saja pada layar untuk mematikan mode gelap.</div>');
      $("#fader").bind("click", function() {
        $("#fader-message").fadeOut(1000, function() {
          $("#fader-message").remove();
          $("#fader").fadeOut(500, function() {
            $("#fader").remove();
            $("#embed_holder").css("z-index", "0");
          });
        });
      });
    });
  });

}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="lightsoff">Click me</button>

How to call Javascript using button

2 Answers2