title: jQuery - onClick event making elements disappear?
body: <p>I'm trying to learn the basics of jQuery, and to test in one of my sites I've been wanting to add functionality so that onClick it will change the inner text and the href of a hyperlink, my issue, is that when I click on my onClick event, the changes happen, but the onClick button's,  and the href I tried changing dissappears, but my .html functionality works?</p>
  
  <p><em>HTML</em> for onClick - </p>
  
  <pre><code>&lt;div class="container" style="margin-top: -20px;"&gt;
      &lt;div class="gamesdesc"&gt;
           &lt;h4 id="gquote" style="padding: 5px 5px 5px 5px;"&gt;test&lt;br&gt;&lt;br&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" onClick="$('#my_div').cod4();" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" onClick="$('#my_div').csgo();" data-slide-to="1" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" onClick="$('#my_div').tf2();" data-slide-to="2" class="active"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;a id="glinks" href=""&gt;&lt;btn class="btn btn-warning"&gt;Test&lt;/btn&gt;&lt;/a&gt;&lt;/h4&gt; 
  </code></pre>
  
  <p><em>jQuery</em> - </p>
  
  <pre><code>(function ($) {
      $.fn.cod4 = function () {
          $("#gquote").html("Test");
          $("glinks").attr("href", "cod4");
      };
  })(jQuery);
  
  (function ($) {
      $.fn.tf2 = function () {
          $("#gquote").html("Test");
          $("glinks").attr("href", "csgo");
      };
  })(jQuery);
  
  (function ($) {
      $.fn.csgo = function () {
          $("#gquote").html("Test");
          $("glinks").attr("href", "tf2");
      };
  })(jQuery);
  </code></pre>