Menu
<button type="button" value="click me" onclick="check_me();" /> function check_me() { //event.preventDefault(); var hello = document.myForm.username.value; var err = ''; if(hello == '' || hello == null) { err = 'User name required'; } if(err != '') { alert(err); $('username').focus(); return false; } else { return true; } } In Firefox, when I try to submit an empty value it throws up the error and sets the focus back to element. But same thing doesn't happen in IE as it throws up error and after clicking OK and posts the form (returns true).
How I can avoid this? I was thinking to avoid this using event.preventDefault(), but I am not sure how to do this using this method. I tried passing checkme(event) .. but it didn't work. I am using Prototype js.
(I know how to pass an event when I bind an .click function in Javascript.. instead of calling onclick within html .. using Jquery, but I have to debug this piece of code)
311
To pass an object to a JavaScript function, we can add a parameter that accepts an object. const someFunc = (arg) => { alert(arg. foo); alert(arg. bar); }; someFunc({ foo: "This", bar: "works!" });
To pass this element to JavaScript onclick function and add a class to that clicked element, we can set the onclick attribute to a function that's called with this . to set the onclick attribute to the a elements to call onClick with this .
In JavaScript, you can use functions as values, just like numbers, strings, and objects. That means you can pass them as arguments, return them from other functions, and set them as properties of objects.
When a W3C event listener's event occurs and it calls its associated function, it also passes a single argument to the function—a reference to the event object. The event object contains a number of properties that describe the event that occurred.
Modify the definition of the function check_me as::
function check_me(ev) { Now you can access the methods and parameters of the event, in your case:
ev.preventDefault(); Then, you have to pass the parameter on the onclick in the inline call::
<button type="button" onclick="check_me(event);">Click Me!</button> A useful link to understand this.
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function check_me(ev) { ev.preventDefault(); alert("Hello World!") } </script> </head> <body> <button type="button" onclick="check_me(event);">Click Me!</button> </body> </html> Although the above is the direct answer to the question (passing an event object to an inline event), there are other ways of handling events that keep the logic separated from the presentation
addEventListener:<!DOCTYPE html> <html lang="en"> <head> </head> <body> <button id='my_button' type="button">Click Me!</button> <!-- put the javascript at the end to guarantee that the DOM is ready to use--> <script type="text/javascript"> function check_me(ev) { ev.preventDefault(); alert("Hello World!") } <!-- add the event to the button identified #my_button --> document.getElementById("my_button").addEventListener("click", check_me); </script> </body> </html> Both of the above solutions are fine for a small project, or a hackish quick and dirty solution, but for bigger projects, it is better to keep the HTML separated from the Javascript.
Just put this two files in the same folder:
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <button id='my_button' type="button">Click Me!</button> <!-- put the javascript at the end to guarantee that the DOM is ready to use--> <script type="text/javascript" src="example.js"></script> </body> </html> function check_me(ev) { ev.preventDefault(); alert("Hello World!") } document.getElementById("my_button").addEventListener("click", check_me); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
