im getting thsi error when i try to use emailjs: Uncaught ReferenceError: sendMail is not defined emailjs

Question

i have a problem with the send email im using emailjs to send email but its not working note its the first time im using javascript to send email i tried once with python and i manged with the help of stackover flow of course

js

function sendMail(params){
        var tempparams ={
            from_name:document.getElementById("InputName").value,
            last_name:document.getElementById("InputLastname").value,
            pick_up:document.getElementById("shippingOption1").value,
            delivery:document.getElementById("shippingOption2").value,
            addressone:document.getElementById("address").value,
            addresstwo:document.getElementById("address2").value,
            total:document.getElementById("total")
            

            
        }
        emailjs.send(service_mvduipb,template_8cr649h,tempParams)
        .then(function(res){
              console.log("success",res.status)
              })
    }
    
}

html

 <section id="sectionone"
form method = "post"         class ="hidesection"  >
    
     <div class="col-sm-6 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-md-12 col-lg-12">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Shipping Method</th>
                                    <th>Name</th>
                                    <th>Adress</th>
                                                                    </tr>
                            </thead>
                                
                                <tbody>
                                <tr>
                                    <td>
                                        
                                    <div class="custom-control custom-radio">
                                        <input id="shippingOption1" name="shipping-option" class="custom-control-input" checked="checked" type="radio">
                                        <label class="custom-control-label" for="shippingOption1">Pickup</label> <span class="float-right font-weight-bold">FREE</span> </div>
                                            <div class="ml-4 mb-2 small">All week</div></td>
                                <td>
                                    <div class="form-group col-md-6">
                                <label for="InputName" class="mb-0">First Name</label>
                                <input type="text" class="form-control" id="InputName" placeholder="First Name"> </div></td>
                                <td> <div class="mb-3">
                                <label for="address">Address *</label>
                                <input type="text" class="form-control" id="address" placeholder="" required>
                                <div class="invalid-feedback"> Please enter your shipping address. </div>
                            </div></td></tr>
                                    
                                        <tr>
                                            <td>
                                        <div class="custom-control custom-radio">
                                        <input id="shippingOption2" name="shipping-option" class="custom-control-input" type="radio">
                                        <label class="custom-control-label" for="shippingOption2">Express Delivery</label> <span class="float-right font-weight-bold">Free (Only To Rabat Area)</span> </div>
                                    <div class="ml-4 mb-2 small">Monday To sunday Exept Tuesday</div>
                                </td><td><div class="form-group col-md-6">
                                <label for="InputLastname" class="mb-0">Last Name</label>
                                <input type="text" class="form-control" id="InputLastname" placeholder="Last Name"> </div>
                                            
                                            </td><td>
                                            <div class="mb-3">
                                <label for="address2">Address 2 *</label>
                                <input type="text" class="form-control" id="address2" placeholder=""> </div></td></tr>
                                </tbody></table>
                                </div></div></div>
                                
                            
     <div class="cart-box-main">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="table-main table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Images</th>
                                    <th>Product Name</th>
                                    <th>Price</th>
                                                                    </tr>
                            </thead>
                            <tbody class ="cart-items">
                                <tr class = "removebut">
                              
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            

            <div class="row my-5">
                <div class="col-lg-8 col-sm-12"></div>
                <div class="col-lg-4 col-sm-12">
                    <div class="order-box">                                                                                                                                                                                                                                             
                        <div class="d-flex gr-total">
                            <h5>Grand Total</h5>
                            <div class="ml-auto h5"> <span id="total" class="d-flex-gr-total">$0.00</span></div>
                        </div>
                        <hr> </div>
                </div>
                <button onClick="sendMail" class= "sumbit type" type="submit">Sumbit</button>
            </div>

        </div>
    </div>

i think the problem is in the head so here is the html code of head so maybe some one with better experience then me can help me out im really sorry for too much questions but thats how i learn maybe some day i can help people aswell:)

<html lang="en">
<!-- Basic -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Site Metas -->
    <title>Freshshop - Ecommerce Bootstrap 4 HTML Template</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Site Icons -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Site CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("user_kYW9KXIGDrTbr7OrZS16g");
})();
</script>

Answer 1

You are not calling the sendMail() function. Also note that onclick attribute is not camelcase. Below line should work in your case.

<button onclick="sendMail()" class= "sumbit type" type="submit">Sumbit</button>