Script loads on page load instead of on click

Question

Trying to replace my PHP email form with JS but stuck. I want the script to run on clicking "myButton" at the moment it runs on page load. Cant use inline due to CSP. now I just get an empty mail on page load. Any help much appreciated.

index.html

      </div>
          <form>
              <div class="form-group">
                  <label for="fname">Full Name :</label>
                  <input class="form-control" type="text" id="name" name="fullname" placeholder="Your full name...">

                  <label for="email">Email :</label>
                  <input class="form-control" type="text" id="email" name="email" placeholder="Your email...">

                  <label for="message">Message :</label>
                  <textarea class="form-control textarea" id="message" rows="3" placeholder="Your message..."></textarea>


                   <button id="myButton" type="button" class="btn btn-primary">Send</button>

                   <script src="js/emailJSform.js" crossorigin="anonymous" type="text/javascript">
                   </script>

              </div>
          </form>
      </div>

and emailJSform.js

console.log("1111");
document.getElementById("myButton").addEventListener("click", sendEmail());
console.log("2222");
function sendEmail() {
  emailjs.init("user_xxxxxxxx");
    let fullName = document.getElementById("name").value;
    let userEmail = document.getElementById("email").value;
    let userMessage = document.getElementById("message").value;

        var contactParams = {
            user_name: fullName,
            user_email: userEmail,
            message: userMessage
        };

        emailjs.send('service_xxxxx', 'template_xxxx', contactParams).then(function (res) {})
}
console.log("333");

emailjs is loaded in header

Script loads on page load instead of on click

0 Answers0