Hey guys am new to javascript web development.I have been through preventDefault() through my code.But when i used it it returns the error ..My code
<html>
<body>
function preventDef(event) {
event.preventDefault();
}
document.querySelector('a').addEventListener("click",
preventDef(event),false);
</script>
click here
</body>
</html>
When i use this code and clicked on the link it redirects me to google.com ..what i need is the event must be blocked my preventDefault() function..
Hope you guys can help me out ..Thanks
You are calling the preventDef function instead of passing it by reference.
document.querySelector('a').addEventListener("click", preventDef, false);
// ^^^ don't call the function
EDIT: Another issue is that you are running this before the DOM is ready. You need to move the <script> tag down to be after the <a>.
<html>
<body>
click here
<script>
// ^^ did you miss an opening script?
function preventDef(event) {
event.preventDefault();
}
document.querySelector('a').addEventListener("click", preventDef, false);
// ^^^ don't call the function
</script>
</body>
</html>
Related
This is the MCVE of the problem I'm having. Let say I have this very simple test page:
<html>
<header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function testMethod(e){
alert(e.target.id);
}
$(document).ready(function(){
$("#btn_test").on("click", testMethod, event);
});
</script>
</header>
<body>
<input type="button" id="btn_test" value="OK" />
</body>
</html>
You can find the jsfiddle here.
In Chrome or IE, when I push the button, the id will be displayed in a message box. But in Firefox since window.event is not defined, I cannot bind testMethod to the button's onclick event.
I know that if I'm writting it inline, I can pass the event like this:
onclick="testMethod(event)"
But how can I pass event to my function in Firefox without writing it inline?
Usually, when you subscribe to an event using on or addEventListener, the event object is passed as a parameter to a callback. You never have to pass it explicitly when you register your callback. So this will do:
$("#btn_test").on("click", testMethod);
The problem with your code on Firefox is that there is no global event property and you get an error:
ReferenceError: event is not defined
and your event subscription never gets registered.
remove the the 3rd parameter it works on firefox.
$("#btn_test").on("click", testMethod);
If you refer to the jQuery Reference here, you'll notice that the third parameter has to be the handler. So, simply remove the third parameter and pass the handler to achieve this.
Check out the demo fiddle here.
<body>
<input type="button" id="btn_test" value="OK" />
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function testMethod(e){
alert(e.target.id);
}
$(document).ready(function(){
$("#btn_test").on("click", testMethod);
});
</script>
I have written a small program to pop up an alert on click of a button using an addEventListener() . PFB the code below:
html file
<html>
<head>
<title>name alert</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input id="p" type="button" value="alert">
</body>
</html>
javascript file
document.getElementById("p").addEventListener("click",greet,true);
function greet(){
alert("hello there !");
}
I dont get a pop up screen this way both the files are in the same folder btw.
test.js loads and executes before the DOM is loaded. So, at that point #p returns null. Try listening to onload event, and add click event.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("p").addEventListener("click",greet,true);
});
// global scope
function greet(){
alert("hello there !");
}
<input id="p" type="button" value="alert">
try to move your
<script type="text/javascript" src="test.js"></script>
just before
</body>
You need to put the addEventListener inside a function that is called on the load event. As the page is being created it will run the javascript as it comes to it. If it hasn't created the HTML yet, when the addEventListener runs it won't find the 'p' element and it will give you an error.
You can also move the javascript to be after the html, but it's more organized to put it in something like this:
<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)
function pageload()
{
document.getElementById("p").addEventListener("click",greet,true);
}
</script>
I'm trying to add a function to a button but the function is called when the page is loaded when the button is clicked, getMemberByName is on another js file and works correctly
<input type="button" value="miembro" id="boton2" />
<script>
$("#boton2").click(getMemberByName('nombre1','apellido1'));
</script>
here is the proper way to bind such event with jQuery:
<script>
$(function(){
$('#boton2').click(function(){
getMEmberByName('nombre1', 'apellido1');
});
});
</script>
hope that helps.
You need to wrap them in functions:
<script>
$(document).ready(function(){
$("#boton2").click(function(){
getMemberByName('nombre1','apellido1');
});
});
</script>
Docs: http://api.jquery.com/click/
Try this instead:
$("#boton2").click(function() {
getMemberByName('nombre1','apellido1');
});
If this can help someone, as #Moosman says, you need to wrap what you want to do in a function and you must not call. Example:
<script>
$("#boton2").on("click", function(){getMemberByName('nombre1','apellido1')});
</script>
OR:
<script>
$("#boton2").on("click", myfunction);
function myfunction() {
getMemberByName('nombre1','apellido1')
}
</script>
Watch out to not call the function $("#boton2").on("click", myfunction()); because this will call the function just when you load the page and not after, for my experience.
Below is part of my code which is working fine if run on browser but function "incrementClickCounter" is not being triggered if used with phonegap and run on device
<div class="newsheading">
<h1><a id="newsTitle" data-bind="text:title,click:function () {
incrementClickCounter(title, content, publish_date, $index());}"></a></h1>
</div>
function incrementClickCounter(title=null, content=null, date=null, index=null){
alert('hello');
}
I tried calling button click event as well. but no luck.
Am i missing anything like js file?
Your function should be situated in <head>, like this:
<head>
<script>
function incrementClickCounter(){
alert('hello');
}
</script>
</head>
And, by the way, what are attributes for? You are not accessing them, so remove them.
I have a working JavaScript function declared in the head of an HTML page. I know how to create a button and call the function when the user clicks the button. I want to call it myself some where on the page:
myfunction();
How do I do it?
You can call it like that:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var person = { name: 'Joe Blow' };
function myfunction() {
document.write(person.name);
}
</script>
</head>
<body>
<script type="text/javascript">
myfunction();
</script>
</body>
</html>
The result should be page with the only content: Joe Blow
Look here: http://jsfiddle.net/HWreP/
Best regards!
I'm not sure what you mean by "myself".
Any JavaScript function can be called by an event, but you must have some sort of event to trigger it.
e.g. On page load:
<body onload="myfunction();">
Or on mouseover:
<table onmouseover="myfunction();">
As a result the first question is, "What do you want to do to cause the function to execute?"
After you determine that it will be much easier to give you a direct answer.
Just drop
<script>
myfunction();
</script>
in the body where you want it to be called, understanding that when the page loads and the browser reaches that point, that's when the call will occur.
You can also put the JavaScript code in script tags, rather than a separate function. <script>//JS Code</script> This way the code will get executes on Page Load.