Call a JavaScript function from a WordPress page?

2 Views

I’ve added the following function to my wordpress theme javascript file wp-content/themes/xxx/js/script.js 

function calculateBmi() {
  var weight = document.bmiForm.weight.value
  var height = document.bmiForm.height.value
  if (weight > 0 && height > 0) {   
    var finalBmi = weight/(height/100*height/100)
    document.bmiForm.bmi.value = finalBmi
    if (finalBmi < 18.5) {
      document.bmiForm.meaning.value = "That you are too thin."
    }
    if (finalBmi > 18.5 && finalBmi < 25) {
      document.bmiForm.meaning.value = "That you are healthy."
    }
    if (finalBmi > 25) {
      document.bmiForm.meaning.value = "That you have overweight."
    }
  }
  else{
    alert("Please Fill in everything correctly")
  }
}

I have added the following code on a wordpress page (in admin) with a form that calls the function when you press the button

Read More
<form name="bmiForm">
  Your Weight(kg): <input type="text" name="weight" size="10"><br />
  Your Height(cm): <input type="text" name="height" size="10"><br />
  <input type="button" value="Calculate BMI" onClick="calculateBmi()"><br />
  Your BMI: <input type="text" name="bmi" size="10"><br />
  This Means: <input type="text" name="meaning" size="25"><br />
  <input type="reset" value="Reset" />
</form>

Nothing happens when I click the button and chrome console gives the following message.

Uncaught ReferenceError: calculateBmi is not defined ?page_id=1368:126
onclick

What is it that is wrong?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. It’s just a matter of enqueuing properly. First, a test page with the HTML provided. Note the use of the global $b5f_hook to catch our page afterwards.

    add_action( 'admin_menu', 'add_auxiliary_menu' );

function add_auxiliary_menu() 
{
    global $b5f_hook;
    $b5f_hook = add_menu_page(
        'Test', 
        '<span style="color:#e57300;">Test</span>', 
        'edit_pages', 
        'b5f_page_id', 
        'b5f_page_callback',
        '', // icon default for empty
        1  // create before Dashboard menu item
    );
}
function b5f_page_callback()
{
    ?>
    <form name="bmiForm">
      Your Weight(kg): <input type="text" name="weight" size="10"><br />
      Your Height(cm): <input type="text" name="height" size="10"><br />
      <input type="button" value="Calculate BMI" onClick="calculateBmi()"><br />
      Your BMI: <input type="text" name="bmi" size="10"><br />
      This Means: <input type="text" name="meaning" size="25"><br />
      <input type="reset" value="Reset" />
    </form>
    <?php
}

    Enqueuing the script, not sure why jQuery is being included as dependency, but it doesn’t matter:

    add_action( 'admin_enqueue_scripts', 'b5f_enqueue' );
function b5f_enqueue( $hook )
{
    global $b5f_hook;
    if( $hook !== $b5f_hook ) # Not our page, bail out
        return;

    $jscriptURL = get_stylesheet_directory_uri() . '/js/script.js';
    wp_enqueue_script( 'custom_script', $jscriptURL, array('jquery'), '1.0', true );
}

    And the script file contains the JS code provided:

    function calculateBmi() { /* rest of the code */ }