Title: devgirl's Replies | WordPress.org

---

# devgirl

  [  ](https://wordpress.org/support/users/elfynity5/)

 *   [Profile](https://wordpress.org/support/users/elfynity5/)
 *   [Topics Started](https://wordpress.org/support/users/elfynity5/topics/)
 *   [Replies Created](https://wordpress.org/support/users/elfynity5/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/elfynity5/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/elfynity5/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/elfynity5/engagements/)
 *   [Favorites](https://wordpress.org/support/users/elfynity5/favorites/)

 Search replies:

## Forum Replies Created

Viewing 15 replies - 1 through 15 (of 38 total)

1 [2](https://wordpress.org/support/users/elfynity5/replies/page/2/?output_format=md)
[3](https://wordpress.org/support/users/elfynity5/replies/page/3/?output_format=md)
[→](https://wordpress.org/support/users/elfynity5/replies/page/2/?output_format=md)

 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Using javascript in Shortcode Callback when creating new plugin](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/#post-16341909)
 * I had a mistake in my timerDiv, I fixed it, it works! Instead of
 *     ```wp-block-code
       timerDiv = document.querySelector(timerDiv);
       ```
   
 * I needed to have:
 *     ```wp-block-code
       timerDiv = document.querySelector('.'+timerDiv);
       ```
   
 *     ```wp-block-code
       	function timer(timerDiv, myTime) {
   
       		timerDiv = document.querySelector('.'+timerDiv);
   
       		function timer() {
       			timerDiv.innerText = myTime;
   
       			if (myTime < 0) {
       				timerDiv.innerText = "Time's up!";
       				clearInterval();
       			}
       			myTime--;
       		}
   
       		setInterval(timer, 1000);	
       	} // timer	
   
   
   
       	timer('<?php echo $name; ?>',<?php echo $seconds; ?>);
       ```
   
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Using javascript in Shortcode Callback when creating new plugin](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/#post-16341851)
 * I’m trying a new approach. This works in a plain PHP file:
 *     ```wp-block-code
       	<div class="timer1"></div> 	
       	<div class="timer2"></div> 
   
   
   
       	<script type="text/javascript">
   
       	let myTime;
       	let timerDiv;
   
       	function timer(timerDiv, myTime) {
   
       		//myTime = 5000;
       		timerDiv = document.querySelector(timerDiv);
   
   
       		function timer() {
       			timerDiv.innerText = myTime;
   
       			if (myTime < 0) {
       				timerDiv.innerText = "Time's up!";
       				clearInterval();
       			}
       			myTime--;
       		}
   
       		setInterval(timer, 1000);		
   
       	}
   
       		timer('.timer1',5051);
       		timer('.timer2',6000);
   
   
       	</script>
       ```
   
 * But when I implement it on my WordPress shortcode side, it keeps giving me the
   error that TimerDiv is NULL:
 *     ```wp-block-code
       	<?php
       	function testing1_shortcode($atts = '', $content = null) { 
   
       		$value = shortcode_atts( array(
       			'name' => "myTimer",
       			'seconds' => "2000"
       		), $atts, 'testing1_shortcode' );
   
       		echo $name = $value['name'];
       		echo $seconds = $value['seconds'];
   
       	?>
   
   
   
   
       	<div class="<?php echo $name; ?> timer">
       	</div><!---<?php echo $name; ?>-->
   
       	<div class="mynewtimer"></div>
   
   
   
   
       	<script>
   
   
   
       	function timer(timerDiv, myTime) {
   
       		timerDiv = document.querySelector(timerDiv);
   
       		function timer() {
       			timerDiv.innerText = myTime;
   
       			if (myTime < 0) {
       				timerDiv.innerText = "Time's up!";
       				clearInterval();
       			}
       			myTime--;
       		}
   
       		setInterval(timer, 1000);	
       	} // timer	
   
   
   
       	timer('<?php echo $name; ?>',<?php echo $seconds; ?>);
   
       	</script>
   
       	<?php
   
   
   
       	} // END shortcode
   
       	add_shortcode('testing-variable-scope', 'testing1_shortcode');
       ```
   
 * In an external JS file:
 *     ```wp-block-code
       	let myTime;
       	let timerDiv;
       ```
   
 * And using these 2 shortcodes to try display in a page, but the countdown itself
   is not showing:
 * [testing-variable-scope name=”timer1″ seconds=”6000″]
 * [testing-variable-scope name=”timer2″ seconds=”11000″]
    -  This reply was modified 3 years, 6 months ago by [devgirl](https://wordpress.org/support/users/elfynity5/).
    -  This reply was modified 3 years, 6 months ago by [devgirl](https://wordpress.org/support/users/elfynity5/).
    -  This reply was modified 3 years, 6 months ago by [devgirl](https://wordpress.org/support/users/elfynity5/).
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Using javascript in Shortcode Callback when creating new plugin](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/#post-16340829)
 * I have created the simplest form of my plugin that I could to help sort out this
   issue.
 *     ```wp-block-code
       function testing1_shortcode($atts = '', $content = null) { 
   
       	$value = shortcode_atts( array(
       		'seconds' => "2000"
       	), $atts, 'testing1_shortcode' );
   
       	$seconds = $value['seconds'];
   
       ?>
   
       <div class="timer">
       </div><!---timer-->
   
   
   
   
       <?php
       } // END shortcode
   
       add_shortcode('testing-variable-scope', 'testing1_shortcode');
       ?>
   
   
   
       <script type="text/javascript">
       	let time = "<?php echo $seconds; ?>";
       	let timerBlock = document.querySelector(".timer");
   
       	function timer() {
       		timerBlock.innerText = time;
   
       		if (time < 0) {
       			timerBlock.innerText = "Time's up!";
       			clearInterval();
       		}
       		time--;
       	}
   
       	setInterval(timer, 1000);		
   
       </script>	
       ```
   
 * I have moved the js to outside the shortcode block now, and even now, it is still
   not working. I just don’t know what a working example would look like to replicate
   variable scope. Please could someone paste a working code using my above example
   so I can get an idea of what works and learn from it. I have learnt variable 
   scope in the last day, I have understood the concept of redeclaration and still
   I honestly don’t know how to fix this.
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Using javascript in Shortcode Callback when creating new plugin](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/#post-16339565)
 * Hi bcworkz, so I actually found an example script that I want to run past you
   two and see if I am on the right track here with regards to localization. I am
   beginning to understand the concept, but just hoping that I am looking into the
   right way to do it if I implement something based on the following example:
 *     ```wp-block-code
       <?php
   
       // Step 1: Enqueue the script in the shortcode function
   
       function my_shortcode_function($atts) {
         wp_enqueue_script('my-script');
   
         // Step 2: Localize the script to pass data from PHP to JavaScript
         wp_localize_script(
           'my-script',
           'my_shortcode_data',
           array(
             'items' => $items, // An array of items to be passed to the script
           )
         );
   
   
       // Step 3: Output the HTML for the shortcode
         ob_start();
         ?>
         <div class="my-shortcode">
           <ul>
             <?php foreach ($items as $item): ?>
               <li><?php echo esc_html($item); ?></li>
             <?php endforeach; ?>
           </ul>
         </div>
         <?php
         return ob_get_clean();
       }
       add_shortcode('my_shortcode', 'my_shortcode_function');
   
       Then, in your JavaScript file, you can access the my_shortcode_data object to access the items array. For example:
   
       // Step 4: Use the data in the script
   
       console.log(my_shortcode_data.items); // Outputs the array of items
       ```
   
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Using javascript in Shortcode Callback when creating new plugin](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/using-javascript-in-shortcode-callback-when-creating-new-plugin/#post-16335200)
 * Jay, thank you so much for your reply. I am having a hard time following your
   directives and implementing it into my code, I’m not really sure where everything
   is supposed to go and just got critical errors all around. I tried to use “local”
   in front of my function and also got an error. I’m just not sure what local even
   is. Is this kind of what you meant – however, it gives me a critical error:
 *     ```wp-block-code
       function devgirl_countdown_clock_function($atts = '', $content = null) { 
   
       		$value = shortcode_atts( array(
       			'time' => "5 December 2023 8:00",
       			'end-notice' => "Countdown Ended",
       			'clock-colour' => "#011c25",
       			'text-colour' => "DarkTurquoise",
       		), $atts, 'devgirl_countdown_clock_function' );
   
       		$time = sanitize_text_field($value['time']);	
       		$end_notice = sanitize_text_field($value['end-notice']);	
       		$clock_colour = sanitize_text_field($value['clock-colour']);
       		$text_colour = sanitize_text_field($value['text-colour']);
   
   
       		{
       	?>
   
   
   
   
   
       		<h2 class="end-notice"></h2>
   
   
   
   
       		<div class="devgirl-countdown-clock">
       			<?php 
       			if ( ! function_exists( 'countdownBlocks' ) ) {
       			local function countdownBlocks($clock_colour, $text_colour, $date_value, $date_value_title) { ?>
   
       				<div class="countdown-block" style="background:<?php echo esc_html($clock_colour); ?>; color:<?php echo esc_html($text_colour); ?>">
       					<div class="clock <?php echo esc_html($date_value); ?>-clock-value"></div>
       					<div class="text"><?php echo esc_html($date_value_title); ?></div>
       				</div><!---countdown-block-->
       				<div class="separators">:</div>
   
   
       			<?php }
   
   
       			countdownBlocks($clock_colour, $text_colour, 'days', 'Days');
       			countdownBlocks($clock_colour, $text_colour, 'hours', 'Hours');
       			countdownBlocks($clock_colour, $text_colour, 'mins', 'Mins');
       			countdownBlocks($clock_colour, $text_colour, 'secs', 'Secs');
   
       			} else {
       				echo 'The function name already exists and cannot be run. Plese check all your plugins function names to find the conflict.';
       			}
       			?>
   
       		</div><!---devgirl-countdown-clock-->
   
   
   
   
   
   
       	<script type="text/javascript">
       	// Set the date we're counting down to
       	const countDownDate = new Date('<?php echo esc_html($time); ?>').getTime();
   
       		// Update the count down every 1 second
       		local x = setInterval(function() {
   
       		// Get today's date and time
       		let now = new Date().getTime();
   
       		// Find the distance between now and the count down date
       		let distance = countDownDate - now;
   
       		// Time calculations for days, hours, minutes and seconds
       		let days = Math.floor(distance / (1000 * 60 * 60 * 24));
       		let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
       		let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       		let seconds = Math.floor((distance % (1000 * 60)) / 1000);
   
       		// Output the result in an element with id="demo"
   
       		document.querySelector('.devgirl-countdown-clock').style.display = 'flex';
       		document.querySelector('.days-clock-value').innerHTML = days;
       		document.querySelector('.hours-clock-value').innerHTML = hours;
       		document.querySelector('.mins-clock-value').innerHTML = minutes;
       		document.querySelector('.secs-clock-value').innerHTML = seconds;
   
       		// If the count down is over, write some text 
       		if (distance < 0) {
       			clearInterval(x);
       			document.querySelector("h2.end-notice").textContent = '<?php echo esc_html($end_notice); ?>';
       			document.querySelector('.devgirl-countdown-clock').style.display = 'none';
       		}
       	}, 1000);
       	</script>	
   
   
   
       	<?php 
       		}
   
       } //END devgirl_countdown_clock_function
   
       add_shortcode('devgirl-countdown-clock', 'devgirl_countdown_clock_function');
       ```
   
 * I’m sorry, I’m just really new to all this so my understanding is limited to 
   basics.
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [New to responsive webdesign](https://wordpress.org/support/topic/new-to-responsive-webdesign/)
 *  [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/new-to-responsive-webdesign/#post-16334645)
 * Just use a visual editor plugin. There are many free ones available, like Elementor.
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Five Star Restaurant Menu and Food Ordering] Shortcode for menu sections](https://wordpress.org/support/topic/shortcode-for-menu-sections/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/shortcode-for-menu-sections/#post-5455972)
 * Hi NateWr, thanks for getting back to me so quick, appreciate your response. 
   Let me know if you ever do add this functionality to your plugin.
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[PublishPress Capabilities - User Role Editor, Access Permissions, User Capabilities, Admin Menus] I can't login to my account any more !!](https://wordpress.org/support/topic/i-cant-login-to-my-account-any-more/)
 *  [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/i-cant-login-to-my-account-any-more/#post-4178239)
 * so, I had the same issue – I don’t know what is wrong with the plug in, but what
   i could do was log into my WordPress using another computer. I did that and deleted
   the plugin.
 * I think that the plugin logs you out of your wordpress on your computer – maybe
   for a set amount of time – but after I accessed the account from another computer–
   it worked again.
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Email newsletter] Including images](https://wordpress.org/support/topic/including-images/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/including-images/#post-4167829)
 * ok, I figured this out – you need to upload it to your media on WordPress first,
   and then add it to a post and then copy that link. The image doesn’t show unless
   you add width and height.
 *   Forum: [Reviews](https://wordpress.org/support/forum/reviews/)
    In reply to:
   [[Email newsletter] Does not email site users](https://wordpress.org/support/topic/does-not-email-site-users/)
 *  [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/does-not-email-site-users/#post-7787505)
 * It does email registered site users. i have just downloaded the plugin and it
   has that functionality.
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Newsletter - Send awesome emails from WordPress] Can't send newsletter](https://wordpress.org/support/topic/cant-send-newsletter/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/cant-send-newsletter/#post-4140035)
 * I got it to work – when you are still in the editing newsletter window – at the
   top their are a few options: save, save and test, send, save and switch to HTML
   source editor – click SEND.
 * THEN go to Newsletters and Trigger the delivery engine.
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Newsletter - Send awesome emails from WordPress] maybe im not doing it right](https://wordpress.org/support/topic/maybe-im-not-doing-it-right/)
 *  [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/maybe-im-not-doing-it-right/#post-4069632)
 * How did you get it to work? I have the same problem
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[PublishPress Capabilities - User Role Editor, Access Permissions, User Capabilities, Admin Menus] cant get edit page role to work](https://wordpress.org/support/topic/cant-get-edit-page-role-to-work/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/cant-get-edit-page-role-to-work/#post-3842497)
 * ok … I’m sorry!!!! Ignore what i said – it is working!!!
 *   Forum: [Themes and Templates](https://wordpress.org/support/forum/themes-and-templates/)
   
   In reply to: [Twenty ten – making mobile](https://wordpress.org/support/topic/twenty-ten-making-mobile/)
 *  Thread Starter [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/twenty-ten-making-mobile/#post-3119489)
 * ok, i kind of figured it out – it’s one of these that was the problem: #access.
   menu-header,
    div.menu, #colophon, #branding, #wrapper
 *   Forum: [Themes and Templates](https://wordpress.org/support/forum/themes-and-templates/)
   
   In reply to: [How to separate Wrapper and footer](https://wordpress.org/support/topic/how-to-separate-wrapper-and-footer/)
 *  [devgirl](https://wordpress.org/support/users/elfynity5/)
 * (@elfynity5)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/how-to-separate-wrapper-and-footer/page/2/#post-3085727)
 * That’s great!

Viewing 15 replies - 1 through 15 (of 38 total)

1 [2](https://wordpress.org/support/users/elfynity5/replies/page/2/?output_format=md)
[3](https://wordpress.org/support/users/elfynity5/replies/page/3/?output_format=md)
[→](https://wordpress.org/support/users/elfynity5/replies/page/2/?output_format=md)