devgirl

I had a mistake in my timerDiv, I fixed it, it works! Instead of

timerDiv = document.querySelector(timerDiv);

I needed to have:

timerDiv = document.querySelector('.'+timerDiv);

	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; ?>);

I’m trying a new approach. This works in a plain PHP file:

	<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:

	<?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:

	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 1 year, 10 months ago by devgirl.
• This reply was modified 1 year, 10 months ago by devgirl.
• This reply was modified 1 year, 10 months ago by devgirl.

I have created the simplest form of my plugin that I could to help sort out this issue.

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.

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:

<?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

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:

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.

Just use a visual editor plugin. There are many free ones available, like Elementor.

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.

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.

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.

It does email registered site users. i have just downloaded the plugin and it has that functionality.

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.

How did you get it to work? I have the same problem

ok … I’m sorry!!!! Ignore what i said – it is working!!!

ok, i kind of figured it out – it’s one of these that was the problem: #access .menu-header,
div.menu,
#colophon,
#branding,
#wrapper

That’s great!