I have two js files. First one (alert.js)
function test() {
var name= document.getElementById("name").value;
alert(name);
};
and second one (main.js)
document.getElementById("question_button").addEventListener("click", test());
in html i looks like that
<body>
...
<script type="text/javascript" src="js/alert.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
Function test is invoked when page is loaded. It's not what I need. It's probably very simple but I dont get it. How to make function "test" invoke only when button is pressed?
You're calling test() and passing the value it returns ( undefined ) to addEventListener. Just pass test directly as an argument instead of calling it:
document.getElementById("question_button").addEventListener("click", test);
or pass in an anonymous function:
document.getElementById("question_button").addEventListener("click", function ( ) { test(x) } );
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'm having trouble getting values from MBean when my javascript is in an external file.
Example:
<script src='scripts/externaljs.js' type='text/javascript' />
<script>
getString();
<script>
//externaljs.js
function getString(){
var string = "#{testMBean.getName()}";
alert(string);
}
It always returns "#{testMBean.getName()}" instead of the string value.
But if I declare it inside my .xhtml file it returns the proper value.
<script>
var string = "#{testMBean.getName()}";
alert(string);
</script>
Am I doing anything wrong here?
This is because your MBean value is only substituted in your view. If you want your external JavaScript file to see those values you can store them in an array / object, or pass them as arguments.
<script>
var mBeanValues = {
string: "#{testMBean.getName()}"
}
</script>
<script src="external.js></script>
<script>
getString()
</script>
=====
// external.js
function getString() {
alert(mBeanValues.string)
}
OR
<script src="external.js"></script>
<script>
getString("#{testMBean.getName()}")
</script>
=====
// external.js
function getString(string) {
alert(string)
}
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.
I am trying to do the following:
<html>
<script type="text/javascript" src="jquery.js"></script>
<a id="random">before</a>
<script>
function test(a)
{
document.getElementById('random').innerHTML="after with variable passed in";
}
function test2()
{
document.getElementById('random').innerHTML="after without variable passed in";
}
</script>
<?php $sample = "hi"; ?>
<button onClick="test(<?php echo $sample;?>)">withVariable</button>
<button onClick="test2()">withoutVariable</button>
</html>
If I click the "withoutVariable" button, the function test2() gets called perfectly because no variables are passed in to it. However, if I click the "withVariable" button the function test(a) is never being called for some reason. Any ideas what I'm doing wrong here?
Since $sample is a string literal you need to enclose it with ''
<button onClick="test('<?php echo $sample;?>')">withVariable</button>
If you're passing a string variable, then you need to add quotes around the value, like so:
<button onClick="test('<?php echo $sample;?>')">withVariable</button>
I need to set a Bean value with one javascript return value.
Something like:
<script type="text/javascript">
function getUserId(){
return 4;
}
</script>
<h:inputText name="lala" value="getUserId()"/>
Thanks
I solved it.
I was using a:jsFunction tag as it follows:
<script type="text/javascript">
function getUserId(){
var user = MyCompany.get_User();
return user;
}
</script>
<a:jsFunction action="#{user.performLogin()}" name="doSiteLogin" >
<a:actionparam name="uid" value="getUserId()"/>
</a:jsFunction>
If you use the property noEscape="true" on the a:actionparam ... it call your javascript code.