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>
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
Problem:
I need to create a shortcode that contains a value extracted from a strong tag.
When I echo "document.write(localStorage.getItem('getnum'));";
the code shows the value 85.
But when I return it (the following code), the shortcode [showpoints] shows no value.
Would you please let me know how to return the value?
Code I tried:
<?php
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
let getnum = $('div.elementor-widget-container p > strong').text();
JSON.parse(localStorage.getItem('getnum'));
});
</script>
<?php
function points_show_function() {
return "<script>document.write(localStorage.getItem('getnum'));</script>";
}
add_shortcode('showpoints', 'points_show_function');
Console:
No error
HTML (code came from a yith point & reward plugin):
<div class="elementor-element elementor-element-c1d0790 elementor-widget elementor-widget-text-editor" data-id="c1d0790" data-element_type="widget" id="pointsid" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Your credit is <strong>85</strong> Points</p>
</div>
</div>
You would need to set the value first so that you could get it later on! On line 6 you would need to set it.
Replace return with echo in your callback function.
You would need to call your short code by using do_shortcode in your template!
So your code would be something like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
let getnum = $('div.elementor-widget-container p > strong').text();
localStorage.setItem('getnum', getnum);
});
</script>
<?php
add_shortcode('showpoints', 'points_show_function');
function points_show_function()
{
echo "<script>document.write(localStorage.getItem('getnum'));</script>";
}
do_shortcode('[showpoints]');
This do_shortcode('[showpoints]'); will do the magic here! So place it on your template where you want to output the value.
Alternative way
According to Mozilla Docs you do not need to use JSON.stringify to set a single string value to localStorage, but just in case you can't get the first method to work, use the following code instead:
<script type="text/javascript">
jQuery(document).ready(function($) {
let getnum = $('div.elementor-widget-container p > strong').text();
localStorage.setItem('getnum', JSON.stringify(getnum));
});
</script>
<?php
add_shortcode('showpoints', 'points_show_function');
function points_show_function()
{
echo "<script>document.write(JSON.parse(localStorage.getItem('getnum')));</script>";
}
do_shortcode('[showpoints]');
Another way using return
If you would need to return the value in your callback function, then use this code:
<script type="text/javascript">
jQuery(document).ready(function($) {
let getnum = $('div.elementor-widget-container p > strong').text();
localStorage.setItem('getnum', JSON.stringify(getnum));
});
</script>
<?php
add_shortcode('showpoints', 'points_show_function');
function points_show_function()
{
return "<script>document.write(JSON.parse(localStorage.getItem('getnum')));</script>";
}
echo do_shortcode('[showpoints]');
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) } );
I have a ..weird problem.
I have this function JavaScript:
function example() {
alert('a');
}
And i have this 2 inputs:
This does NOT work
<input type="image" src="img/erase.png" alt="Borrar" onclick="example();">
this WORKS
<input type="image" src="img/erase.png" alt="Borrar" onclick="alert('a');">
I know they do the SAME but in me real project i want create with PHP bucle a items and they should call JavaScript.
This example is for understan easy this problem.
Thank you ppl! :D
Solution:
In mi code in PHP i write bad the "echo" and put a lot of " and ', and when i go to write the parameters can write ' or " because they are used to write and describe the "echo" (PHP) and then i should write """.
example:
echo "<input type='image' src='img/erase.png' alt='Borrar' onClick='borrarPost("NOTICIA","".$row['Titulo']."",".$row["ID"].")'>";
the " is for a parameters String, normal echo is like echo "Hi" but this who write a input need use ",' and "
It works for me:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function example() {
alert('a');
}
</script>
</head>
<body>
<div>
<input type="image" src="img/erase.png" onclick="example()">
</div>
</body>
</html>
Note that it only works if you have the example function in the root scope of the javascript. For example, this wouldn't work:
window.onload = function() {
function example() {
alert('jo');
}
}
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.