Javascript function in phtml files

Question

I am using onclick function in my template file, here is my html

 <div class="input-box">
            <input type="checkbox" name="change_password" id="change_password" value="1" onclick="setPasswordForm(this.checked)" title="<?php echo 'Change Password'; ?>"<?php if($_user->getChangePassword()==1): ?> checked="checked"<?php endif; ?> class="checkbox" />
        </div>

Below is my javascript code

<script>
 require([
     'jquery',
     'mage/mage'
  ], function($){
 function setPasswordForm(arg){
    if(arg){
        $('current_password').up(4).show();
        $('current_password').addClassName('required-entry');
        $('password').addClassName('required-entry');
        $('confirmation').addClassName('required-entry');

    }else{
        $('current_password').up(4).hide();
        $('current_password').removeClassName('required-entry');
        $('password').removeClassName('required-entry');
        $('confirmation').removeClassName('required-entry');
    }
}
<?php if($_user->getChangePassword()): ?>
    setPasswordForm(true);
<?php endif; ?>

});

</script>

How to use it in magento2? It is working fine in m1.

I am getting below error when used above code

Uncaught ReferenceError: setPasswordForm is not defined

Answer 1

Try the below code for html(Remove the onclick):

<div class="input-box"> 
<input type="checkbox" name="change_password" id="change_password" value="1" title="<?php echo 'Change Password'; ?>" class="checkbox" /> 
</div>

and use the following javascript:

<script>
require(['jquery'], function($){
    $(document).ready(function(){
        $('#change_password').click(function(){
            if($(this).is(':checked')){
                $('current_password').up(4).show();
                $('current_password').addClassName('required-entry');
                $('password').addClassName('required-entry');
                $('confirmation').addClassName('required-entry');
            }
            else{
                $('current_password').up(4).hide();
                $('current_password').removeClassName('required-entry');
                $('password').removeClassName('required-entry');
                $('confirmation').removeClassName('required-entry');
            }
        });
    });
});
</script>

Answer 2

Main error in question is, You have declared a new function inside

function($){
}

You can not call function declared inside function($) {} anywhere outside of it.

One trick is to declare function variable before function($) {} and then define it inside jQuery function code as below.

<script>
var foo;                           // Here's the difference
require(['jquery'], function($){
  foo = function ()
  {
    alert('Bar');
  }
});
</script>

Reference : Can not define function inside jQuery

Answer 3

<script type="text/javascript">
requirejs(['jquery'], function (jQuery) {
    jQuery(function ($) {
function setPasswordForm(arg){ console.log('test')
    if(arg){
        $('current_password').up(4).show();
        $('current_password').addClassName('required-entry');
        $('password').addClassName('required-entry');
        $('confirmation').addClassName('required-entry');

    }else{
        $('current_password').up(4).hide();
        $('current_password').removeClassName('required-entry');
        $('password').removeClassName('required-entry');
        $('confirmation').removeClassName('required-entry');
    }
}
<?php if($_user->getChangePassword()): ?>
    setPasswordForm(true);
<?php endif; ?>
   });
});

</script>

use reequirejs instead of require as given , clear static-content and cache , this may work