CODEWITHSUNDEEP
javascripthtml
Michael Heinisch
Michael Heinisch

Reputation: 61

Javascript code attached to button fails to execute. Need help debugging

I have written an html-page with a textfield where text can be entered into and on the click of a button, an email containing the entered text should be sent to a predetermined emailaddress.

The page shows in Firefox and Chrome as intended, but when clicking the button, nothing happens.

function sendEmail(adress) {
  Email.send("[email protected]", "[email protected]", "subject", adress, "smtp.email.com", "[email protected]", "pAssWoRd", function done(message) {
    alert("Email sent successfully")
  });
}
<!DOCTYPE html>
<html>

<body>
  <script src="smtp.js"></script>
  <form action="/action_page.php">

    <p>TEXT</p>
    <p>TEXT</p>
    <p>TEXT</p>
    Enter text here: <input type="text" name="fname"><br>
    <input type=button onClick="sendEmail(fname.value);" value='send'>


  </form>

</body>

</html>

The button should send the email and display the "Email sent successfully" alert-message. Can you help me in debugging this code?

Upvotes: 0

Views: 216

Answers (3)

CTS_AE
CTS_AE

Reputation: 14823

We can't really debug it without the dependencies like smtp.js, but I can teach you how to fish, I mean debug JavaScript.

Knowing how to properly debug in JS can make your life much easier.

If the tips below are too much to grab onto the first time you can always fall back to good'ol console.log to see how your code is behaving; it's just much slower with less context & options. As others said too, you can use a classic alert to see if code is getting where you expect it to; it can just become a pain to click through alerts if you keep refreshing and trying to debug further.

Note: It may also be possible that you're trying to use node/server side code to send an email. If that's the case then it will not work on the client side. It seems like you're trying to use a library which should allow you to use this on the client side though.

Warning: it's dangerous to pass an email server password to the client, now they'll have your credentials. This code should happen on the server side. The client side can hit an endpoint on the server that would then kick off the code to send the email from the server.

How to Debug JS in Chrome

  1. Throw debugger; where you want the code to break.
    • For your case I would try throwing one above Email.send.
  2. Make sure you have Chrome Inspector open (right click on the page > Inspect)
  3. You may want to refresh the page if you're trying to break on code that isn't event triggered, or if you missed the event like a page load event.
  4. The code should pause when you hit the debugger; statement.
    • If it does not then that means the code never made it to your debugger statement, or you have breakpoints turned off.
    • The button in the picture below shows the "Deactivate Breakpoints" button. deactivate breakpoints button
  5. You should now see the following "Paused in debugger" at the top of the window: paused in debugger notification
  6. The code is now frozen at the debugger statement. Now you will have access to the current call stack, scope/variables, as well as other useful debugging tools.
    • You can type into the console and run snippets there if you want to see what the current state is. For example if there's a variable you can type it into the console to see what it's value is, or you could find it in the Scope panel.
    • You can control the execution of your code.
      • You can click the resume/play/continue button to continue execution of code. This is useful too when you have another breakpoint you're expecting to hit after the current breakpoint.
      • You can step as well as step in, out, or over code.
        • If you want to go to the next line you can use step.
        • If there's a function call you don't want to go into you can use step over next function call.
        • If you want to go into a function that's being called you can use the step into next function call.
        • If you stepped into a function and want to get out of it you can use the step out of current function. This is useful when you enter into 3rd party libraries that you have no clue what's going on and don't really care about it.
        • If there's a script file you really don't care about you can right click the source code in the Sources tab and choose Blackbox script.

Random Tips

  • Sometimes it can be easier to debug code that's not in the html file, so move it into its own js file.
  • If you can, it's best not to minify a file that you're trying to debug.
    • If you are transpiling the file you should be able to generate a source map that maps the minified code back to the original. Chrome will show you the original code and let you set breakpoints in it instead of trying to work with a minified version. There are still some parts of code that don't translate 100% so you may not always be able to break where you would expect.
      • There can be some caveats if your transpilation process mutilates variable names then you may not be able to type them directly into the console and access them; you may be stuck working with minified variable names which can be confusing. I don't remember if Chrome has gotten around this issue yet.
  • You can click the numbers in the gutter of the Sources pane when on a file to set a breakpoint for that line. You can also click on the blue phantom arrows within the code to set column breakpoints on some code as well.
  • Theses tips should also work with Firefox. If you have an older browser you can look into something like firebug which can allow you to inject a debug framework onto a page in a few different ways.

Upvotes: 2

Grace Simmons
Grace Simmons

Reputation: 1

First things first. 1. You have an extra closing script tag 2. Make your input type submit 3. Your form action should probably be action="mailto:emailfrom ... method="post">

Upvotes: -1

Alvin
Alvin

Reputation: 302

Try to put alert or log to console inside function. I am able to call the function sendEmail without any issue. The only problem with your code was an extra script tag </script>

The Code:

function sendEmail(adress) {
  alert("Inside sendEmail function");
  Email.send("[email protected]", "[email protected]", "subject", adress, "smtp.email.com", "[email protected]", "pAssWoRd", function done(message) {
    alert("Email sent successfully")
  });
}
<!DOCTYPE html>
<html>

<body>
  <script src="smtp.js"></script>
  <form action="/action_page.php">

    <p>TEXT</p>
    <p>TEXT</p>
    <p>TEXT</p>
    Enter text here: <input type="text" name="fname"><br>
    <input type=button onClick="sendEmail(fname.value);" value='send'>

  </form>

</body>

</html>

Upvotes: 1

Related Questions