Why does my javascript function result in a rangeError?

Question

Fairly new to this. I read a bunch of answers with people having a similar problem. I tried all the solutions offered (using e.stopPropagation, using e.stopImmediatePropagation, using id instead of tag...) but nothing worked. I deployed a single html page through firebase. I wrote the script directly in the html. Here's my code:

function onclick(e) {
  /*e.stopPropagation() and e.preventDefault() --YIELDD SAME RESULT*/
  e.stopImmediatePropagation()
  console.log("hello")
}

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick()">Update</button>
</form>
</div>
</body>

Desired behavior: on click, button with id logs a message in the devtools console.

p.s. I'm sure there's a basic mistake I'm making but I am not able to find which one. Please help!

Answer 1

onclick is the name of a common DOM property. When a function with this name exists in the Global scope (as yours does), it essentially becomes a property of the window object and can overwrite the Global one. Call your callback function something else or move it out of the Global scope and it will work.

Also, e.stopImmediatePropagation() is most likely not required for your use case.

Finally, nothing can come after </body> except </html>. <script> elements are allowed in the head and body, but no where else.

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick1()">Update</button>
</form>

<script>
  function onclick1(e) {
    console.log("hello")
  }
</script>

---

Now, since you are just learning all this, let's make sure you get off on the right foot. There is soooo much bad HTML and JavaScript floating around and bad habits are still used today because most people don't know any better so they just copy/paste someone else's code that seems to work.

Don't use inline HTML event handlers (onclick, onmouseover, etc.) in the first place. Separate your JavaScript from your HTML and follow modern, standards based code. There are many reasons to not use inline HTML event handlers. Instead, use the .addEventListener() method.

Next, the <label> element is a semantic element that works in one of two ways:

1. It has a for attribute that has a value that is identical to the form field that it is the label "for":

<label for="txtFirstName">First Name:</label>
<input id="txtFirstName">

2. It contains the form field element that is is a label for:

<label>First Name: <input id="txtFirstName"></label>

In either case, you are telling the client that there is a relationship between the label and the form field it is a label for. This allows a user to click or touch the label and activate the form field. It is also very helpful to those who rely on assistive technologies (like screen readers) to use the web.

So, putting all this together, your code reworked would look like this (I've added just a little CSS to make the page a little cleaner to look at, but none of that is required):

label { display:block; width:200px; margin-bottom:.5em; }
button { margin-top: 1em; font-size:1.2em; padding:5px; }

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email: <input name="email" type="email" placeholder="@"></label>
  <label>New Password: <input name="password" type="password"></label>
  <label>Confirm Password: <input name="second-password" type="password"></label>
  <button id="submit-button" type="button">Update</button>
</form>

<script>
  // get a reference to the DOM element you want to work with
  let btn = document.getElementById("submit-button");
  
  // configure the event handler in JavaScript, not in HTML
  btn.addEventListener("click", logToConsole);
 
  // give your functions meaningful names
  function logToConsole(e) {
    console.log("hello")
  }
</script>

Answer 2

<button id="submit-button" type="button" onclick="onclick()">Update</button> causes an infinite loop. You're overriding the onclick method which basically makes your code say "When I'm clicked, click me" ad infinitum.

Change the name of function onclick() to anything else, like function hello() and it'll work.

Here's a working codepen you can play with. https://codepen.io/anon/pen/mzajGd

Answer 3

I think it's best to change which event your stopping, which seems to be the form submit. Unsure why you're getting the range issue, but this should work.

<!DOCTYPE html>
<html>
<body>

<form id="login-form" class="reset-form" >
<label>Email:</label>
<input name="email" type="email" placeholder="@">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<input type="submit">Update</button>
</form>

<script>

document.getElementById("login-form").addEventListener("submit", function(event){
    event.preventDefault();
    alert('boogy');
});

</script>

</body>
</html>

Answer 4

Hi Steve and welcome to Stack Overflow.

First place your Button, there are several ways to acomplish this:

<button class="ui-btn" id="cmdHello">Push Me</button>
<a href="#" class="ui-btn" id="cmdHello2">Yet another Button</a>

Now react to it's Click event:

<script type="application/javascript">
    $(document).bind("pageinit", function() {
        $(document).on("click", "#cmdHello", function(evt) {
            console.log("Hello World");
        });
    });
</script>

That should do the trick.