I'm trying to code an OWL caroussel. This is working fine. Inside the caroussel I have 2 items with an intro text. This will be more items later. By clicking on a button, the text is swapped with another text. This is working fine when not using the OWL-caroussel. As soon as i'm using the caroussel, this function is not working anymore.

Here is my script:

<script>
            function changeText() {
                    var id=document.getElementsByName("button")[0].id;
                    if(id==1){
                        document.getElementById("text").innerHTML = "<?php echo the_sub_field('content_1'); ?>";
                        document.getElementsByName("button")[0].id=0;    
                    }else {
                        document.getElementById("text").innerHTML = "<?php echo the_sub_field('intro_1'); ?>";  
                        document.getElementsByName("button")[0].id=1;  
                    }
                }
            </script>
            
            <?php $image = get_sub_field('image_1');
                if( !empty($image) ): ?>
                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="img-fluid" />
            <?php endif; ?>
            <p id="text"><?php echo the_sub_field('intro_1'); ?></p>
            <button name='button' id='1' onclick="changeText()">Change Text</button>

I'm also using ACF, but replacing that with normal text I see the same behaviour.

I'm not seeing any errors in console, so i do not know why this isn't working with OWL-caroussel.

Demo: see https://sun.devwiw.nu/demo/

regards, Roland