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 ?
Related
In my apps script addon there is a lot of buttons and I want to pass the button ID as variable in the function executed. I have this execFunction in code.gs to avoid google.script.run duplicates, works well without the btnID parameter, but it doesnt let me pass an argument to the final function. fa seems not valid.
What could be the right path to have the possibility of make if/else depending on the clicked button id?
index.html
<button id='freezerButton' class="btn btn-primary" onclick="execFunction('myFunction', this.id)">FREEZER</button>
<script>
function execFunction(functionName, btnID) {
google.script.run[functionName](btnID);
}
</script>
code.gs
function myFunction(btnID) {
if (btnID == freezerButton) {
Logger.log('From freezerButton')
}
}
Thanks!
Replace freezerButton by 'freezerButton', or before the if statement, declare freezerButton assigning the appropriate value, i.e.
const freezerButton = 'freezerButton';
Instead of passing this.id on the onclick attribute, pass this.
Example:
code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index')
}
function myFunction(id){
console.log(id)
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="myButton" onclick="execute('myFunction',this)">Click me!</button>
<script>
function execute(name,btn){
google.script.run[name](btn.id)
}
</script>
</body>
</html>
Related
How to get the onclick calling object?
onClick to get the ID of the clicked button
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>
In the below code if I change background color of Submit button with onclick="document.getElementById('s').style.background='green'" then it changes perfectly but if I do it with function call then it doesn't work which I tried for Clear button. I have commented the functions. Answer me if you have any solution for this.
function open() {
x = document.getElementById('s');
x.style.background = "green";
}
function close() {
document.getElementById('c').style.background = "red";
}
<!DOCTYPE html>
<html>
<head>
<title>Events-code with me</title>
</head>
<body>
<h1>Changing style</h1>
<button id="s" onclick="document.getElementById('s').style.background='green'">Submit</button>
<button id="c" onclick="close()">Clear</button>
</body>
</html>
close() is a method on the window object when you name your function as close and you called on click. the browser engine called the windows close() method, not your close method. A simple way to solve this is to rename your function.
function open() {
x = document.getElementById('s');
x.style.background = "green";
}
function closeX() {
document.getElementById('c').style.background = "red";
}
<!DOCTYPE html>
<html>
<head>
<title>Events-code with me</title>
</head>
<body>
<h1>Changing style</h1>
<button id="s" onclick="document.getElementById('s').style.background='green'">Submit</button>
<button id="c" onclick="closeX()">Clear</button>
</body>
</html>
Check out this snippet:
<!DOCTYPE html>
<html>
<head>
<title>Events-code with me</title>
</head>
<body>
<h1>Changing style</h1>
<button id="s" onclick="openX();">Submit</button>
<button id="c" onclick="closeX();">Clear</button>
<script type="text/javascript">
function openX() {
x = document.getElementById('s');
x.style.background = "green";
}
function closeX() {
document.getElementById('c').style.background = "red";
}
</script>
</body>
</html>
Actually when you use open(); and close();, it will call window.open(); and window.close();. In JavaScript, all global variables (like document)and functions(for eg alert()) belongs to window object (as window.documentand window.alert()).
To make those functions work, you must rename them, which I have done above.
The open() method is a default method of JS to opens a new browser window or a new tab, so change it with any other method name, for example
function openModal() {
x = document.getElementById('s');
x.style.background = "green";
}
<button id="s" onclick="openModal">Submit</button>
I'tried ur code with function call i'ts because open() and close() are an inbuilt function in javascript and don't forget to write ur js code in tag :)
Give an another function name instead of open and close
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>
I am not able to call the javascript function with parameter in dynamically generated HTML code.
The same function gets called successfully when I don't pass any parameter, but with parameters the function call fails. Not sure whether it is a syntax error.
below is my code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<script>
function myFunction(name,job) {
var name="prasad";
var str='link';
document.write(str);
};
function fun(id1) {
alert("fun menthod "+id1);
}
</script>
</body>
</html>
If I don't pass the parameter it gets called successfully.
<!DOCTYPE html>
<html>
<body>
<div id="next">
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
</div>
<script>
function myFunction(name,job)
{
var a='"';
a=a+name+a;
var str="<a href='#' onclick='fun("+a+")'>link</a>";
document.getElementById('next').innerHTML=str;
}
function fun(id1)
{
alert("fun menthod "+id1);
}
</script>
</body>
</html>
Remove this line, because the variable name is same as the parameter name
var name="prasad";
Here: var name="prasad"; you change the value of the 'name' parameter maybe this is your problem. Try deleting this line and see the output.
change name to:
var name="'prasad'";
I'm seeing syntax error in JS Console otherwise.