Why emailjs is not sending me emailjs? in HTML? How can i send email with emailjs in HTML?

Question

Why emailjs is not sending me emailjs? in HTML? How can I send email with emailjs in HTML? earlier I used Reactjs to send email with emailjs and everything was fine but when I tried doing this in my html css JavaScript project than its not even working can anyone can help to how can I send emails thought emailjs in html you can see and check my code i followed emailjs docs i just want to take user email if he subscribe

 <div class="main-content container">
        <div class="banner-content">
            <h1>Great sofware is built with amazing developers</h1>
            <p>We help build and manage a team of world-class developers to bring your vision to life</p>
            <div class="input-subscribe">
                <input type="email" id="email" placeholder="Subscribe newsletter"  onclick="sendMail()">
                <button class="btn-subscribe btn-item">
                    Subscribe
                </button>
            </div>
            <div class="logo-sponsor">
                <p>Sponsored by:</p>
                <img src="images/paypal.png" alt="paypal-logo">
                <img src="images/google.png" alt="google-logo">
                <img src="images/dropbox.png" alt="dropbox-logo">
            </div>
        </div>

js code:

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script type="text/javascript">
        (function () {
            emailjs.init('HXOYlFkZOUDFI1oCe');
        })();
    </script>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('input-subscribe').addEventListener('submit', function (event) {
                event.preventDefault();
                // generate a five digit number for the contact_number variable
                this.contact_number.value = Math.random() * 100000 | 0;
                // these IDs from the previous steps
                emailjs.sendForm('contact_service', 'contact_form', this)
                    .then(function () {
                        console.log('SUCCESS!');
                    }, function (error) {
                        console.log('FAILED...', error);
                    });
            });
        }

        function sendMail() {
            var params = {
                name: document.getElementById("name").value,
                email: document.getElementById("email").value,
                message: document.getElementById("message").value,
            };

            const serviceID = "service_qfcqnmh";
            const templateID = "template_jeyyx8j";

            emailjs.send(serviceID, templateID, params)
                .then(res => {
                    document.getElementById("name").value = "";
                    document.getElementById("email").value = "";
                    document.getElementById("message").value = "";
                    console.log(res);
                    alert("Your message sent successfully!!")

                })
                .catch(err => console.log(err));

        }
    </script>

Answer 1

You are selecting <div> with class input-subscribe using document.getElementById() . That div has no id input-subscribe , so you need to change the class to an id = "input-subscribe" ,

The <button> inside the div.input-subscribe is not working as a submit button, so you need to either change the <div> to a form or add button type = "submit" . Without this the submit event never occurs because the default behavior of a button as submit is only valid inside a form.