How do I define onclick function from php file in jQuery?

Question

New to API's and trying to figure out how to get a function to be defined from a js file when i click on a button ia php file. The js file is correctly added in the functions.php file.

Right now the jQuery code in my js file looks like this.

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

function getsource(id){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/"+id+"/information?apiKey=acc3c7fd3cb74d02b7564eefd51172cd",
    success: function(res) {
    
    document.getElementById("sourceLink").innerHTML=res.sourceUrl
    document.getElementById("sourceLink").href=res.sourceUrl
    }
    });
    }
    
    function getrecipe(q){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/search?apiKey=acc3c7fd3cb74d02b7564eefd51172cd&number=3&query="+q,
    success: function(res) {
    for(var i = 0; i < res.results.length; i++ )
    document.getElementById("output").innerHTML+="<h1>"+res.results[i].title+"</h1><br><img src='"+res.baseUri+res.results[i].image+"' width='400' /><br>Ready in "+res.results[i].readyInMinutes+" minutes"
    getsource(res.results[i].id)
    }
    });
    }

});

And the php file it should listen to is this one.

<?php get_header(); ?>    

<section class="mst-section more-recipes-section">
            <div class="mst-row">
                <div class="row">
                    <div class="mst-column-1">
                        <div class="mst-inner-column">
    
                         
                        <input id="search"><button onclick="getrecipe(document.getElementById('search').value)">Search</button>
                        <div id="output"></div>
                        <a href="" id="sourceLink"></a>
    
                        </div>
                    </div>
                </div>
            </div>
    </section>
    
    <?php get_footer(); ?>

In my console I get that the function getrecipe is not defined. How can I get the function to understand that I am calling it in the onclick?

One more thing. If i do the script in the php file it works fine. Like this.

                 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                <input id="search" ><button onclick="getrecipe(document.getElementById('search').value)">Search</button>
                <div id="output"></div>
                <a href="" id="sourceLink"></a>

                <script>
                      function getsource(id){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/"+id+"/information?apiKey=acc3c7fd3cb74d02b7564eefd51172cd",
    success: function(res) {
    
    document.getElementById("sourceLink").innerHTML=res.sourceUrl
    document.getElementById("sourceLink").href=res.sourceUrl
    }
    });
    }
    
    function getrecipe(q){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/search?apiKey=acc3c7fd3cb74d02b7564eefd51172cd&number=3&query="+q,
    success: function(res) {
    for(var i = 0; i < res.results.length; i++ )
    document.getElementById("output").innerHTML+="<h1>"+res.results[i].title+"</h1><br><img src='"+res.baseUri+res.results[i].image+"' width='400' /><br>Ready in "+res.results[i].readyInMinutes+" minutes"
    getsource(res.results[i].id)
    }
    });
    }

                </script>

Grateful for help!

Answer 1

If i do the script in the php file it works fine.

The problem isn't that you moved the code to a different file. The problem is that you changed the code , and what you changed it to no longer works.

In your working version the functions are defined in global scope. In your non-working version they are not defined in global scope. They're defined within the callback function to the document.ready event. (Why the change?)

Move the functions back into global scope (remove the jQuery(document).ready(/*...*/); operation) and the code will behave the same as the working version.

---

Alternatively, if you don't want to have functions in global scope (it's generally considered poor form and can lead to bugs as complexity grows) then you can define them locally within that function scope and then assign the click handler also within that scope.

So instead of using the onclick attribute directly in the HTML (also considered poor form and more difficult to maintain as complexity grows) you would apply the click handler in JavaScript:

document.getElementById('search').addEventListener('click', getRecipe);

In this case the event object will be automatically passed as the argument to getRecipe , and you'd use that within the getRecipe function to get the value. For example:

function getrecipe(e) {
  var q = e.target.value;

  // the rest of the existing function...
}