Why does the changed input field change the element but no longer allows Jquery arc effects
<p>Here is the link of the questions example :</p>

<p><a href="http://www.frysa.us/Arctext/" rel="nofollow">http://www.frysa.us/Arctext/</a></p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; 
        &lt;title&gt;Arctext.js - Curving text with CSS3 and jQuery&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
        &lt;meta name="description" content="Arctext.js - Curving text with CSS3 and jQuery" /&gt;
        &lt;meta name="keywords" content="arc, letters, words, rotate, warp, circle, curve, along, path, jquery, css3, transform" /&gt;
        &lt;meta name="author" content="Codrops" /&gt;
        &lt;link rel="shortcut icon" href="../favicon.ico"&gt; 
        &lt;link rel="stylesheet" type="text/css" href="css/demo.css" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
        &lt;link href='http://fonts.googleapis.com/css?family=Montserrat|Sail|Concert+One' rel='stylesheet' type='text/css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;/body&gt;


&lt;/html&gt;
        &lt;div class="container"&gt;






            &lt;section class="sub" id="sub4"&gt;
                &lt;div class="example"&gt;
</code></pre>

<p>/* This is where the id of example4 is applied to the  -></p>

<pre><code>                    &lt;h3 id="example4"&gt;See me change&lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class="code"&gt;
                    &lt;h4&gt;Example 4 - Set/animate&lt;/h4&gt;
                    &lt;p&gt;Set or animate&lt;/p&gt;
                    &lt;code&gt;$example4.arctext({radius: 300})&lt;/code&gt;
                    &lt;p class="buttons"&gt;
                        &lt;a id="button_set" href="#"&gt;&lt;span&gt;Set me&lt;/span&gt;&lt;span&gt;radius: 140,&lt;br /&gt; dir: -1&lt;/span&gt;&lt;/a&gt;
                        &lt;a id="button_anim1" href="#"&gt;&lt;span&gt;Animate me&lt;/span&gt;&lt;span&gt;radius: 300,&lt;br /&gt; dir: -1,&lt;br /&gt; animation: 300ms ease-out&lt;/span&gt;&lt;/a&gt;
                        &lt;a id="button_anim2" href="#"&gt;&lt;span&gt;Animate me&lt;/span&gt;&lt;span&gt;radius: 200,&lt;br /&gt; dir: 1,&lt;br /&gt; animation: 300ms&lt;/span&gt;&lt;/a&gt;
                        &lt;a id="button_reset" href="#"&gt;&lt;span&gt;Reset me&lt;/span&gt;&lt;span&gt;radius: 300,&lt;br /&gt; dir: 1&lt;/span&gt;&lt;/a&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="clr"&gt;&lt;/div&gt;
            &lt;/section&gt;
            &lt;div class="clr"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/jquery.arctext.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
</code></pre>

<p>/*THE ELEMENT IM TRYING TO ADJUST IS example4 -></p>

<pre><code>        &lt;script type="text/javascript"&gt;
            var $headline = $('#headline').hide();

            var $word1      = $('#arc-wrapper').find('h3').hide();
            var $word2      = $('#arc-wrapper').find('h4').hide();

            var $example1   = $('#example1').hide();
            var $example2   = $('#example2').hide();
            var $example3   = $('#example3').hide();
            var $example4   = $('#example4').hide();

            google.load('webfont','1');

            google.setOnLoadCallback(function() {
                WebFont.load({
                    google      : {
                        families    : ['Montserrat','Concert One']
                    },
                    fontactive  : function(fontFamily, fontDescription) {
                        init();
                    },
                    fontinactive    : function(fontFamily, fontDescription) {
                        init();
                    }
                });
            });

            function init() {


                $headline.show().arctext({radius: 400});

                $word1.show().arctext();
                $word2.show().arctext({radius: 148, dir: -1});

                $example1.show().arctext({radius: 300});
                $example2.show().arctext({radius: 400, dir: -1});
                $example3.show().arctext({radius: 500, rotate: false});
                $example4.show().arctext({radius: 300});

                $('#button_set').on('click', function() {
                    $example4.arctext('set', {
                        radius      : 140,
                        dir         : -1
                    });
                    return false;
                });
                $('#button_anim1').on('click', function() {

                    $example4.arctext('set', {
                        radius      : 300, 
                        dir         : -1,
                        animation   : {
                            speed   : 300,
                            easing  : 'ease-out'
                        }
                    });
                    return false;
                });
                $('#button_anim2').on('click', function() {
                    $example4.arctext('set', {
                        radius      : 200, 
                        dir         : 1, 
                        animation   : {
                            speed   : 300
                        }
                    });
                    return false;
                });




                $('#button_reset').on('click', function() {
                    $example4.arctext('set', {
                        radius      : 300, 
                        dir         : 1
                    });
                    return false;
                });

            };
        &lt;/script&gt;
</code></pre>

<p>/* THIS IS THE ADDITIONAL INPUT FIELD I'VE SETUP -></p>

<pre><code>&lt;input type='text' id='userInput' value='Enter Text Here' /&gt;
&lt;input type='button' onclick='changeText2()' value='Change Text'/&gt;

&lt;script type="text/javascript"&gt;
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    document.getElementById('example4').innerHTML = userInput;

}
&lt;/script/&gt;
</code></pre>
