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.
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
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 ?
Why prototype function is not called .. when image is clicket?
Html Code :--
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<script type="text/javascript" src="tt.js"></script>
</head>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcSTcJA5J-LOj0HOP1ZMzdSQIsxwuguFdtlesHqzU15W8TXx232pFg" onclick="myFunction('Info clicked')"/>
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
</body>
</html>
java script :--
function myFunction(l) {
this.k = "hello";
alert(this.k);
var t = this.temp(l);
alert(t);
}
myFunction.prototype.temp = function(a)
{
alert(a);
return 10;
}
If i put inside html page body it works :--
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
Because you are calling this.temp() on the constructor function and not on an instance of it.
You need to create an instance with new.
new myFunction('Info clicked')
Note that this doesn't make sense. If you want to do things when the constructor runs, you should assign the methods to the constructor and not the prototype.
If you want to stick to your javascript definition, all you need to do to solve this problem is to change the attribute onClick on your html code to new myFunction("...");
<input type="image" src="http://..." onclick="new myFunction('Info clicked')"/>
I am not able to call a javascript function from QT .
I am using the below code
QT code :
QWebFrame *frame = m_d->m_webView->page()->mainFrame();
frame->evaluateJavaScript("displayhello()");
Here `displayhello()` is the `Javascript` function defined in the HTML file.
HTML code :
<html>
<head>
<script type="text/javascript" src="" />
<script type="text/javascript">
function displaymessage(str)
{
alert(str);
}
function displayhello()
{
alert("Hello");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onClick="displayhello()">
</form>
</body>
</html>
Can anyone give me any pointers why the Javascript function is not getting called.
I know this post is old but in case someone has the same:
Always check Dev Tools to see what the JavaScript console tells you.
You can enable devtools by adding this line tou your QT main function
QWebSettings::globalSettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
Now by right clicking->inspect, console, you would have seen the JS interpret error.
You should have lower case 'c' in 'onclick':
<input type="button" value="Click me!" onclick="displayhello()">
QVariant holdInformation = map->page()->mainFrame()->evaluateJavaScript (QString ("displayhello ()"));
Replace map by your desired class name.
Also, try using onload.
<body onload = "displayhello()" topmargin = "0" leftmargin = "0">
I have a function as follows:
function textNext(element, num) {
document.getElementById("lblContent").innerHTML = "hello";
}
However, the text of the lblContent label won't change when the function is called.
What am I doing wrong?
btw : lblContent is of type asp:Label
Since lblControl is a server side ASP.NET control, you will need to use the control ClientID property in order to use it in javascript:
function textNext(element, num) {
document.getElementById(<"%=lblContent.ClientID%>").innerHTML = "hello";
}
Check the console in your browser for errors. I tried to reproduce your problem in a standard HTML/Javascript environment.
This works for me.
<html>
<head>
<title>Test</title>
<head>
<body>
<div id="lblContent">Previous text</div>
Change text
<script type="text/javascript">
function textNext() {
document.getElementById("lblContent").innerHTML = "Next text";
}
</script>
</body>
</html>