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>
6 you would need to set it.return with echo in your callback function.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]');