How to cycle between 2 div inside 1 div

Your linked home page has a couple console errors that need to be resolved before you can expect your code to work reliably. The errors appear to be unrelated to your code, but they can impact any JS running on the page.

I did not find the HTML you refer to on your linked page, but I did find a div element with ID “insert here” in the Test 1111 post. In that post the colors are in fact cycling and the subsequent section with ID “cytat” is cycling its text content. I’m not sure if this is the cycling you’re trying to get working. If it is, it’s working! ?? If not, be aware that you can only have one unique ID attribute on a page. If you have more than one ID attribute that’s the same on a page, any related JS like getElementById() will not work reliably.

That what I exactly need is to cycle 2 <div> where is “Test22222” now.

I am not able to write proper javascript

Test22222
<div id="here_cycle"></div>

<div class="panel panel-default mini3" id="cycle01">
<div class="mcho-c"">
<a href="" title="" id="link"> <img class="mcho1" id="obrazek" src="/wp-content/gallery/choinka2023/choinka-h3b.jpg" /></a>
</div>

<div class="kafw5 kafw5-992" style="text-align: center;">&nbsp;</div>
</div>


<div class="panel panel-default mini3" id="cycle02">
<div class="panel-heading">
<h3 class="panel-title"><a href="/serwis/dokumentacja/">Najnowsze pliki dokumentacji do pobrania</a></h3>
</div>

<div class="front-widget">
<div class="homecc">
<div>
[download category="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,33,43,44,45,46,47,49,50,51,52,53,54,56,59,60,61,62,63,64,65,66,67" stream_limit="8" sort_by="file_date" sort_order="desc" ]
</div>
</div>
</div>

<div class="kafw5 kafw5-992" style="text-align: center;">&nbsp;</div>
</div>


<script>
var imgsa1 = new Array (
<div id="cycle01">,
<div id="cycle02">
);

var currentAda1 = 0;
var imgCta1 = 3;
function cyclea1() {
  if (currentAda1 == imgCta1) {
    currentAda1 = 0;
  }
document.getElementById('here_cycle').innerHTML = imgsa2[currentAda1];
  currentAda1++;
}
  window.setInterval("cyclea1()",10000);
</script>

• This reply was modified 11 months ago by hackelberry.
• This reply was modified 11 months ago by hackelberry.

Example2 = Test3333

I need cycle between <div id=”cycle03″>, <div id=”cycle04″>

<code>
Test3333
<div class="panel panel-default mini3" id="cycle03"style="margin-bottom: 10px !important;">
<div class="panel-heading">
<h3 class="panel-title"><a href="/urzadzenia/ultra-szybkie-przekazniki-posredniczace-duzej-mocy-hr8a-400v/">Ultraszybkie przeka?niki po?rednicz?ce du?ej mocy HR8A-400V</a></h3>
</div>
<div class="front-widget">
<div class="homecc">
<div style="text-align: center;"><img class="wp-image-11580 aligncenter" src="https://www.computers-and-control.pl/wp-content/uploads/HR8A_newsletter_small1o.jpg" alt="" width="294" height="162"></div>
<p class="marek3 marek3a mini2 n05">Du?a szybko?? dzia?ania i minimalna rezystancja styków.</p>
<p class="marek3a mini1"><a href="/urzadzenia/ultra-szybkie-przekazniki-posredniczace-duzej-mocy-hr8a-400v/"><span style="color: #ff0000;">Czytaj wi?cej...</span></a></p>

</div>
</div>
<div class="kafw5 kafw5-992" style="text-align: center;">&nbsp;</div>
</div>
<div class="panel panel-default mini3" id-"cycle04">
<div class="panel-heading">
<h3 class="panel-title"><a href="/nowosci/nowe-funkcje-wyswietlacza-urzadzen-utx-serii-3/">Nowe funkcje wy?wietlacza urz?dzeń UTX serii 3.</a></h3>
</div>
<div class="front-widget">
<div class="homecc">

Wy?wietlacz UTX serii 3&nbsp; wyposa?ony w rozbudowane funkcje graficzne zapewnia intuicyjn? prac?, a dodatkowe pozycje "menu" u?atwiaj? diagnostyk? oraz parametryzacj? urz?dzeń.
<div style="text-align: center;"><a ><img class="alignnone wp-image-11694" src="https://www.computers-and-control.pl/wp-content/uploads/wskazy-wektorowe.bmp" alt="" width="350" height="165"></a></div>
<p class=""><a href="nowosci/nowe-funkcje-wyswietlacza-urzadzen-utx-serii-3/"><span style="color: #ff0000;">Czytaj wi?cej...</span></a></p>

</div>
</div>
<div class="kafw5 kafw5-992" style="text-align: center;">&nbsp;</div>
</div>
</code>

• This reply was modified 11 months ago by hackelberry.

<code>
<script>
var imgsa1 = new Array (
$('#cycle01'), $('#cycle02')
);

var currentAda1 = 0;
var imgCta1 = 3;
function cyclea1() {
  if (currentAda1 == imgCta1) {
    currentAda1 = 0;
  }
document.getElementById('here_cycle').innerHTML = imgsa2[currentAda1];
  currentAda1++;
}
  window.setInterval("cyclea1()",10000);
</script>
</code>

I try also this, but this not works also.

• This reply was modified 11 months ago by hackelberry.

How are you adding your script to the page? It looks like you’ve added it using the page editor because there are p tags within your script causing syntax errors. Like this from the page’s HTML source code:

var imgsa1 = new Array (
$('#cycle01'), $('#cycle02')
);</p>
<p>var currentAda1 = 0;
var imgCta1 = 3;
function cyclea1() {

You cannot add JS code from the editor for this very reason — it corrupts your code. Code should be either enqueued in an external file or output from an appropriate action hook that does not involve “the_content” filter. “wp_print_scripts” action is a reasonable choice. Add the action callback with a large priority arg to help ensure your script loads after jQuery.