CODEWITHSUNDEEP
htmlwordpress
bomblord
bomblord

Reputation: 33

Wordpress adding additional html for seemingly no reason

I'm using wordpress to set up a website. When putting in a specific block of code wordpress for seemingly no reason will add additional HTML into my code that screws up the formatting. I've looked it over and found no noticeable errors that would cause that behavior. This is the relevant bit of code (I've included most of it as I don't know where the issue actually lies)

<div class = "section">
    <script type="text/javascript">
            var imageCount = 0;
            var position = 0;
            var isStopped = false;
            $( document ).ready(function() {
                imageCount =  document.getElementsByClassName("rotator").length; //Pull all elements into an array and count the number to get the count.
                //setButtons();
            });

            function nextImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines when it should cycle back to the beginning
                    position += $('#imgGal').width();//position change to width of the element
                    if (position >= rotationNumber) //cycle once the end is reached
                    {
                        position = 0;
                    }

                //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
            function previousImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines the end

                    if (position <= 0) //cycle once the beginning is reached
                    {
                        position = rotationNumber - $('#imgGal').width();
                    }
                    else{
                        position -= $('#imgGal').width();//position change to width of the element
                    }
                    //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
        </script>
<div id = "testimonials">
<a class = "controls" onclick="previousImage()"><div class = "arrow">&lt;</div></a><!--
--><div id = "imgGal">
<div class = "rotator">
<div class = "blurb">
<h3>John Doe</h3><p>"Positive Testimonial"</p>
</div>
</div><!--
--><div class = "rotator">
<div class = "blurb">
<h3>John Doe the Second</h3><p>"Positive Testimonial"</p>
</div>
</div>  
</div><!--
--><a class = "controls" onclick="nextImage()"><div class = "arrow">&gt;</div></a>
</div>
</div>
</div>

And this is what it looks like after being published

    <div class="section">
    <script type="text/javascript">
            var imageCount = 0;
            var position = 0;
            var isStopped = false;
            $( document ).ready(function() {
                imageCount =  document.getElementsByClassName("rotator").length; //Pull all elements into an array and count the number to get the count.
                //setButtons();
            });</p>
<p>         function nextImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines when it should cycle back to the beginning
                    position += $('#imgGal').width();//position change to width of the element
                    if (position >= rotationNumber) //cycle once the end is reached
                    {
                        position = 0;
                    }</p>
<p>             //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
            function previousImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines the end</p>
<p>                 if (position <= 0) //cycle once the beginning is reached
                    {
                        position = rotationNumber - $('#imgGal').width();
                    }
                    else{
                        position -= $('#imgGal').width();//position change to width of the element
                    }
                    //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
        </script><p></p>
<div id="testimonials">
<a class="controls" onclick="previousImage()"><p></p>
<div class="arrow">&lt;</div>
</a><p><a class="controls" onclick="previousImage()"></a><!--
--></p>
<div id="imgGal">
<div class="rotator">
<div class="blurb">
<h3>John Doe</h3>
<p>"Positive Testimonial"</p>
</div>
</div>
<p><!--
--></p>
<div class="rotator">
<div class="blurb">
<h3>John Doe the Second</h3>
<p>"Positive Testimonial"</p>
</div>
</div>
</div>
<p><!--
--><a class="controls" onclick="nextImage()"></a></p><a class="controls" onclick="nextImage()">
<div class="arrow">&gt;</div>
</a><p><a class="controls" onclick="nextImage()"></a>
</p></div>
</div>

Notice the doubling of elements and insertion of random p tags? I haven't been able to find anything on this so I'm kind of stumped. If I isolate the code it's happening on and just throw it in a non-wordpress HTML page by itself the issue doesn't happen. It's happening specifically on the a tags that I'm using to trigger the javascript

The code that is actually having the issue

Goes from this

<a class = "controls" onclick="previousImage()"><div class = "arrow">&lt;</div></a>

<a class = "controls" onclick="nextImage()"><div class = "arrow">&gt;</div></a>

to this

<a class="controls" onclick="previousImage()"><p></p>
<div class="arrow">&lt;</div>
</a><p><a class="controls" onclick="previousImage()"></a><!--
--></p>

<a class="controls" onclick="nextImage()"></a></p><a class="controls" onclick="nextImage()">
<div class="arrow">&gt;</div>
</a><p><a class="controls" onclick="nextImage()"></a>

Upvotes: 0

Views: 35

Answers (1)

Mat
Mat

Reputation: 986

As @janh2 has stated. This is most likely down to 'wpautop' - https://codex.wordpress.org/Function_Reference/wpautop

You can disable it by adding the following code:

remove_filter( 'the_content', 'wpautop' );

or

remove_filter( 'the_excerpt', 'wpautop' );

or both...

I have to ask though, why are you adding JavaScript in to a WordPress page content? It's not the recommended way to add JavaScript code to a WordPress site and it should be enqueued as per the documentation in the WordPress Codex:

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

Upvotes: 1

Related Questions