My function code's not working

JavaScript
1

Hi guys, Im working on my personal porfolio & thinking to add some web behaviour on my contact page.

Here’s my html code:

<div class="contact-form">
                <h3>Leave a message:</h3>
                <input type="text" placeholder="Name">
                <input type="text" placeholder="Email">
                <input type="text" placeholder="Subject">
                <label for="email">
                    <textarea id="email" name="extra" cols="66" rows="7" placeholder="Message"></textarea>
                </label>
                <form>
                    <input type="submit" value="Send a message"/>
                </form>
            </div>

Here’s the JS code:

function sendButton() {     
let greeting = alert("Thank you for you message 😊." + " I'll get back to you soon!");
 }
 let sendMsg = document.querySelector("form");
 sendMsg.addEventListener("click", sendButton);

For some reasons, my JS code keep appearing error (“Uncaught TypeError: Cannot read property ‘addEventListener’ of null”). I double checked the code and still cannot figure out where i went wrong. Please help me debug this, thanks :pray:

2

I replicated the code bellow in a codepen

and it does not give me the error ure describing?
Which IDE are u using?

1 Like
3

@Trangvo Welcome to the forum. :wave:

  1. You should put all the form elements (input/textarea) inside the form, not just the single input element.

  2. You have added a click handler to the form element. That is not very useful, you want a submit handler.

  3. If you are getting null back from querySelector but you have the element on the page you might be loading the script before the DOM is ready. Place the script at the bottom of the HTML right before the closing body tag. It is usually also a good idea to wrap the code inside a DOMContentLoaded handler, so your code does not execute before the content has loaded.

Example 
document.addEventListener("DOMContentLoaded", () => {
  function sendButton(e) {
    // preventDefault so the page does not reload
    e.preventDefault();
    let greeting = alert(
      "Thank you for you message 😊." + " I'll get back to you soon!"
    );
  }
  let sendMsg = document.querySelector("form");
  sendMsg.addEventListener("submit", sendButton);
});
1 Like
4

Thank you for your help! I used VS Code to write the code. I think the reason it did not run for me was that i put my JS file into separate one and link it into the html file

Now i removed the JS file, and place the JS code under section and it works fine!

<footer>
        <div>
            <p> Copyright 2020 Trang Vo. All Rights Reserved.</p>
            <p><i class="fas fa-code"></i> by Trang Vo.</p>
        </div>
    </footer>
    <script>
        let sendMsg = document.querySelector("form");
            sendMsg.addEventListener("click", sendBtn);

        function sendBtn(){
              alert("Thank you for your message, I'll be in touch soon!");
            }
    </script>
    
</body>
</html>

Thanks again for your comments :hugs::pray:

5

Thank you for your insights! I think the reason it did not run for me was that i put my JS file into separate one and link it into the html file.

I followed your advice, I removed the JS file, and place the JS code under section and it works!

My question now is when should i put the JS code into separate file in order to make it work? Im still a new bee to JavaScript and there;s still a lot to learn​:sweat_smile::pray:

6

It’s fine (better) to have the code in a file. But you should still link to the script file at the bottom of the HTML before the closing body tag.

If you make sure to wrap all the code inside a DOMContentLoaded (or load) event handler you are sure that the DOM (the page content) has loaded and is ready to be interacted with.

7

Can you show the your original code ?
I did not see the embbed JS file in your HTML file ?