Passing parameters on JQuery .trigger
The passed arguments are unable to display,
I get undefined even if the arguments are passed. How do I alert the passed arguments when a button is clicked.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#btn1").on('click', function(event, one, two) {
alert(one)
});
});
$("#btn1").trigger('click', [1, 2]);
</script>
<button id="btn1">Click here to display args passed</button>
</body>
</html>
you can do it by bellow code.
$(document).ready(()=>{
$("#myBtn").on('click',{ extra : 'you parameter value' }, function(event) {
var data = event.data;
myFunction(data.extra);
});
})
function myFunction(parameter)
{
alert(parameter)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myBtn">Button</button>
Related
i am trying to create simple app using Jquery, but I am stuck, i have two basic functions, first which holds the event, and second function, where i want to call first function, code here:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="test" onclick="funct1(event,id)">clcik1</button>
<button id="test2" onclick="mySecondFunction()">clcik2</button>
<script>
const funct1 = function myFunction(event,id) {
alert(event.target.id);
};
function mySecondFunction(){
return funct1()
}
</script>
</body>
</html>
problem is, first function holds (event and id), Accordingly when i call this function into my second function it throwing errors. I want, when i click second button executes first function... any solutions?
You should pass the arguments to mySecondFunction in onClick and in the js you should take it in mySecondFunction and pass it to funct1. Like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="test" onclick="funct1(event,id)">clcik1</button>
<button id="test2" onclick="mySecondFunction(event,id)">clcik2</button>
<script>
const funct1 = function myFunction(event,id) {
alert(event.target.id);
};
function mySecondFunction(event,id){
return funct1(event,id)
}
</script>
</body>
</html>
you need to pass the arguments into your second function:
const funct1 = function myFunction(event,id) {
alert(event.target.id);
};
function mySecondFunction(e, id){
return funct1(e, id)
}
and on the the button
<button id="test2" onclick="mySecondFunction(event, id)">clcik2</button>
Something like this ?
I've been trying to use the this keyword to fetch a dataset but I keep getting the Uncaught TypeError: Cannot read property 'page' of undefined, In the below script what I'm trying to achieve is that whenever a button is clicked then it displays certain content and hide all other things
<!DOCTYPE html>
<html>
<head>
<title>Show Page</title>
<script>
function showPage(division){
document.querySelectorAll('h1').style.display = 'none';
document.querySelector(divsion).style.display = 'block';
}
document.addEventListener('DOMContentLoaded',() => {
document.querySelectorAll('button').forEach(button => {
button.onclick = () => {
showPage(this.dataset.page);
}
});
});
</script>
</head>
<body>
<button data-page="page1">Page1</button>
<button data-page="page2">Page2</button>
<button data-page="page3">Page3</button>
<h1 id="page1">This is page1</h1>
<h1 id="page2">This is page2</h1>
<h1 id="page3">This is page3</h1>
</body>
</html>
Use function() {} in your click handler, to be in the correct context. Arrow functions keep the surrounding context:
document.querySelectorAll('button').forEach(button => {
button.onclick = function() {
console.log(this.dataset.page);
}
});
<button data-page="page1">Page1</button>
<button data-page="page2">Page2</button>
<button data-page="page3">Page3</button>
If you use arrow function then this will not contain the current element, you need to pass a parameter(event) in the function, get its current target and then get the properties.
function showPage(division) {
document.querySelectorAll('h1').style.display = 'none';
document.querySelector(divsion).style.display = 'block';
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('button').forEach(button => {
button.onclick = (e) => { // pass a parameter here
//showPage(e.currentTarget.dataset.page); // get current target of event and its property.
console.clear();
console.log(e.currentTarget.dataset.page); // output on console
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Show Page</title>
</head>
<body>
<button data-page="page1">Page1</button>
<button data-page="page2">Page2</button>
<button data-page="page3">Page3</button>
<h1 id="page1">This is page1</h1>
<h1 id="page2">This is page2</h1>
<h1 id="page3">This is page3</h1>
</body>
</html>
See if it helps you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Close window</title>
</head>
<body>
<button id="abc" onclick="temp1()">button</button>
<script type="text/javascript">
function temp1() {
alert("temp1");
};
function temp2() {
alert("temp2");
}
document.getElementById("abc").addEventListener("click", temp2, false);
</script>
</body>
</html>
but I want to show "temp2" first, and then show "temp1"
Is that possible? or the event execution order depends on the browser so I can't change it?
thanks for help!!
Please review this one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Close window</title>
</head>
<body>
<!-- here is your first AddEventlistener-->
<button id="abc" onclick="temp1()">button</button>
<script type="text/javascript">
function temp1() {
alert("temp1");
};
function temp2() {
alert("temp2");
}
/*then here is your second AddEventlistener*/
var d = document.getElementById("abc");
d.addEventListener("click", temp2, false);
/*javascript will execute it in order
if you want to change the order. remove first EventListener then register new one after. something like this:
*/
//remove listener
d.onclick = null;
//register new
d.addEventListener('click', temp1);
</script>
</body>
</html>
There are a couple of ways in which you can guarantee the order here:
document.getElementById("abc").addEvenListener("click", function() {
temp2();
temp1();
}, false);
Another option would be:
function temp2() {
alert();
temp1(); // call temp1 at the end of temp2
}
document.getElementById("abc").addEventListener("click", temp2, false);
I am trying to call the immediate function defined in test1.js on click of the button defined under html file. It always throws error "test is undefined". I am little bit aware that being a immediate function, it calls immediately, and so it returns the "undefined error". But is there any way I can call the immediate function (access methods, properties, etc.) on click of the button?
Thank you in advance.
//test1.js
var test = (function(){
alert(window);
var tmp = 'hello';
}());
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>
You have to modify your code so that the IIFE returns an object with a tmp property. Such as
var test = (function(){
alert(window);
var tmp = 'hello';
return {tmp:tmp};
}());
You need to explicitly return an object containing any data you want made available after you run the IIFE. (Just add the return as I did to the snippet below).
//test1.js
var test = (function(){
alert(window);
// you need to return any values you want accessible
return {
tmp: "hello"
}
}());
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>
Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>