Alright, let's break down the root causes of this error and walk through solutions step by step:

1. The Critical Issue: Script Tag Misuse #

The biggest problem here is how you've structured your script tag. When a <script> tag has a src attribute (like your jQuery import), browsers ignore all code inside the tag itself—they only load and run the external JS file. That means your ajax_post() function never actually gets defined, so when the button's onclick tries to call it, the browser can't find it.

Fix: Split Your Script Tags #

Separate the jQuery import and your custom function into two distinct script tags:

<!-- Load jQuery first -->
<script src="jquery-3.2.1.min.js"></script>
<!-- Now define your function in a separate, standalone script tag -->
<script>
function ajax_post(){
    // Remove this line entirely—you already loaded jQuery above!
    // loadScript('javascript/jquery-3.2.1.min.js');

    alert("button clicked");
    var bid='<?php echo $b; ?>';
    var userid='<?php echo $userid; ?>';
    var cm = document.getElementById("latest_comment").value;
    var vars = "your_comment="+cm+"&bookid="+bid+"&userid="+userid;
    
    // Rest of your XMLHttpRequest code here...
}
</script>

2. Redundant jQuery Loading (And Why It's Bad) #

Your ajax_post() function starts with loadScript('javascript/jquery-3.2.1.min.js')—this is totally unnecessary. You already loaded jQuery at the top of your page, and reloading it can cause conflicts (like overwriting the jQuery object mid-execution) and waste bandwidth. Just delete this line.

3. Better Alternative: Ditch Inline onclick for jQuery Event Binding #

Inline onclick attributes can lead to scope issues (especially if your function is wrapped in a local scope like $(document).ready()) and make code harder to maintain. A cleaner approach is to use jQuery's event binding:

Example: #

<!-- Give your button an ID for easy targeting -->
<input type="button" id="commentSubmitBtn" value="Submit Comment">

<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
    // Bind click event to the button once the DOM is fully loaded
    $('#commentSubmitBtn').click(function(){
        alert("button clicked");
        var bid='<?php echo $b; ?>';
        var userid='<?php echo $userid; ?>';
        var cm = $("#latest_comment").val(); // Use jQuery to get input value
        
        // Bonus: Use jQuery's $.post() instead of raw XMLHttpRequest—it's simpler!
        $.post("comments.php", {
            your_comment: cm,
            bookid: bid,
            userid: userid
        }, function(response){
            // Handle the server's response here (e.g., update comments section)
            console.log("Server response:", response);
        });
    });
});
</script>

This ensures your event handler is only attached after the DOM is ready, avoiding "element not found" or "function not defined" issues.

4. Check for DOM Load Order #

If your button is rendered before your script tag, the browser will parse the onclick attribute before your ajax_post() function is defined. To fix this, move your script tags to the bottom of your HTML, right before the closing </body> tag. This way, all DOM elements are loaded before your functions are defined.

内容的提问来源于stack exchange，提问作者SATYAM SAREEN