How Can I Bind To The Change Event Of A Textarea In Jquery?

July 31, 2024 Post a Comment

I want to capture if any changes happened to

. Like typing any characters (deleting,backspace) or mouse click and paste or cut.  Is there a jQuery event that can tr</div><h2 id="solution_1">Solution 1:

</h2><div class="answer-desc"><p>Try this actually:</p><pre><code id="code_0" class="hljs language-javascript">$(<span class="hljs-string">'#textareaID'</span>).<span class="hljs-title function_">bind</span>(<span class="hljs-string">'input propertychange'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {

$(<span class="hljs-string">"#yourBtnID"</span>).<span class="hljs-title function_">hide</span>();

<span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>.<span class="hljs-property">length</span>){
        $(<span class="hljs-string">"#yourBtnID"</span>).<span class="hljs-title function_">show</span>();
      }
});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_0')">Copy</button></pre><h2><a rel="nofollow noreferrer noopener" href="http://output.jsbin.com/ikeses/200/edit?html,css,js,output">DEMO</a></h2><p>That works for any changes you make, typing, cutting, pasting.</p></div><h2 id="solution_2">Solution 2:

</h2><div class="answer-desc"><p><code>bind</code> is deprecated. Use <code>on</code>:</p><a name='more'></a><pre><code id="code_3" class="hljs language-javascript">$(<span class="hljs-string">"#textarea"</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">'change keyup paste'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
    <span class="hljs-comment">// your code here</span>
});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_3')">Copy</button></pre><p>Note: The code above will fire multiple times, once for each matching trigger-type. To handle that, do something like this:</p><pre><code id="code_4" class="hljs language-javascript"><span class="hljs-keyword">var</span> oldVal = <span class="hljs-string">""</span>;
$(<span class="hljs-string">"#textarea"</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">"change keyup paste"</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">var</span> currentVal = $(<span class="hljs-variable language_">this</span>).<span class="hljs-title function_">val</span>();
    <span class="hljs-keyword">if</span>(currentVal == oldVal) {
        <span class="hljs-keyword">return</span>; <span class="hljs-comment">//check to prevent multiple simultaneous triggers</span>
    }

oldVal = currentVal;
    <span class="hljs-comment">//action to be performed on textarea changed</span><span class="hljs-title function_">alert</span>(<span class="hljs-string">"changed!"</span>);
});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_4')">Copy</button></pre><p><a rel="nofollow noreferrer noopener" href="https://jsfiddle.net/6bt2g/"><strong>jsFiddle Demo</strong></a></p></div><h2 id="solution_3">Solution 3:

</h2><div class="answer-desc"><p>Use an <a rel="nofollow noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/Events/input"><code>input</code></a> event.</p><pre><code id="code_6" class="hljs language-javascript"><span class="hljs-keyword">var</span> button = $(<span class="hljs-string">"#buttonId"</span>);
$(<span class="hljs-string">"#textareaID"</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">'input'</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){
  <span class="hljs-keyword">if</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span> === <span class="hljs-string">''</span>){
    <span class="hljs-comment">// Textarea has no value</span>
    button.<span class="hljs-title function_">hide</span>();
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// Textarea has a value</span>
    button.<span class="hljs-title function_">show</span>();
  }
});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_6')">Copy</button></pre></div><h2 id="solution_4">Solution 4:

</h2><div class="answer-desc"><p>This question needed a more up-to-date answer, with sources. This is what <em>actually</em> works (though you don't have to take my word for it):</p><pre><code id="code_7" class="hljs language-php"><span class="hljs-comment">// Storing this jQuery object outside of the event callback </span><span class="hljs-comment">// prevents jQuery from having to search the DOM for it again</span><span class="hljs-comment">// every time an event is fired.</span><span class="hljs-keyword">var</span><span class="hljs-variable">$myButton</span> = $(<span class="hljs-string">"#buttonID"</span>)

<span class="hljs-comment">// input           :: for all modern browsers [1]</span><span class="hljs-comment">// selectionchange :: for IE9 [2]</span><span class="hljs-comment">// propertychange  :: for <IE9 [3]</span>
$(<span class="hljs-string">'#textareaID'</span>).on(<span class="hljs-string">'input selectionchange propertychange'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

<span class="hljs-comment">// This is the correct way to enable/disabled a button in jQuery [4]</span><span class="hljs-variable">$myButton</span>.prop(<span class="hljs-string">'disabled'</span>, this.value.length === <span class="hljs-number">0</span>)

}
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_7')">Copy</button></pre><p>1: <a rel="nofollow noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/Events/input#Browser_compatibility">https://developer.mozilla.org/en-US/docs/Web/Events/input#Browser_compatibility</a> 
2: <a rel="nofollow noreferrer noopener" href="https://stackoverflow.com/questions/6382389/oninput-in-ie9-doesnt-fire-when-we-hit-backspace-del-do-cut#answer-13780757">oninput in IE9 doesn't fire when we hit BACKSPACE / DEL / do CUT</a> 
3: <a rel="nofollow noreferrer noopener" href="https://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx">https://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx</a> 
4: <a rel="nofollow noreferrer noopener" href="https://api.jquery.com/prop/#prop-propertyName-function">http://api.jquery.com/prop/#prop-propertyName-function</a></p><p><strong>BUT, for a more global solution that you can use throughout your project</strong>, I recommend using <a rel="nofollow noreferrer noopener" href="https://github.com/spicyj/jquery-splendid-textchange">the textchange jQuery plugin</a> to gain a new, cross-browser compatible <code>textchange</code> event. It was developed by <a rel="nofollow noreferrer noopener" href="http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html">the same person</a> who implemented the equivalent <code>onChange</code> event for Facebook's ReactJS, which they use for nearly their entire website. And I think it's safe to say, if it's a robust enough solution for Facebook, it's probably robust enough for you. :-)</p><p><strong>UPDATE:</strong> If you happen to need features like drag and drop support in Internet Explorer, you may instead want to check out <a rel="nofollow noreferrer noopener" href="https://github.com/pandell/jquery-splendid-textchange"><code>pandell</code>'s more recently updated fork of <code>jquery-splendid-textchange</code></a>.</p></div><h2 id="solution_5">Solution 5:

</h2><div class="answer-desc"><h3>2018, without JQUERY</h3><p><em>The question is <strong>with</strong> JQuery, it's just FYI.</em></p><h4>JS</h4><pre><code id="code_12" class="hljs language-javascript"><span class="hljs-keyword">let</span> textareaID = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'textareaID'</span>);
<span class="hljs-keyword">let</span> yourBtnID = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'yourBtnID'</span>);
textareaID.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'input'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
    yourBtnID.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'none'</span>;
    <span class="hljs-keyword">if</span> (textareaID.<span class="hljs-property">value</span>.<span class="hljs-property">length</span>) {
        yourBtnID.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'inline-block'</span>;
    }
});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_12')">Copy</button></pre><h4>HTML</h4><pre><code id="code_13" class="hljs language-bash"><textarea <span class="hljs-built_in">id</span>=<span class="hljs-string">"textareaID"</span>></textarea>
<button <span class="hljs-built_in">id</span>=<span class="hljs-string">"yourBtnID"</span> style=<span class="hljs-string">"display: none;"</span>>click me</div>
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_13')">Copy</button></pre></div>

</div>
<div id='baca-juga'></div>
<script>
            //<![CDATA[
            var bacaJugaJudul=[],bacaJugaNum=0,bacaJugaUrl=[];function bacaJuga(a){for(var u=0;u<a.feed.entry.length;u++){var e=a.feed.entry[u];bacaJugaJudul[bacaJugaNum]=e.title.$t;for(var l=0;l<e.link.length;l++)if("alternate"==e.link[l].rel){bacaJugaUrl[bacaJugaNum]=e.link[l].href,bacaJugaNum++;break}}}function showBacaJuga(a){function u(a,u){u.parentNode.insertBefore(a,u.nextSibling)}var e=document.querySelector("#baca-juga"),l=document.createElement("div"),t=document.querySelector(".post-body-artikel").querySelectorAll("div > br, span > br, div > p, span > p"),r=Math.ceil(.5*t.length),n=document.getElementById("related"),c=(l.setAttribute("class","baca-juga-wrap"),{bacaJuga:!0,jumlahBacaJuga:3,judulBacaJuga:"Baca Juga"});optionLinkMagz(c);if(!0===c.bacaJuga&&void 0!==t[r]){u(e,null!==n?n:t[r]);for(var g=0;g<bacaJugaUrl.length;g++)bacaJugaUrl[g]==a&&(bacaJugaUrl.splice(g,1),bacaJugaJudul.splice(g,1));var J=Math.floor((bacaJugaJudul.length-1)*Math.random()),g=0;if(0<bacaJugaJudul.length&&0<c.jumlahBacaJuga){e.appendChild(l);n=e;null!=(n=n.previousElementSibling)&&"BR"===n.tagName&&(n.style.display="none");for(var i="<strong>"+c.judulBacaJuga+"</strong><ul>";g<bacaJugaJudul.length&&g<c.jumlahBacaJuga;g++)i+='<li><a href="'+bacaJugaUrl[J]+'">'+bacaJugaJudul[J]+"</a></li>",J<bacaJugaJudul.length-1?J++:J=0;l.innerHTML=i+="</ul>"}}}
            //]]>
        </script>
<script src='/feeds/posts/summary/-/Javascript?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script src='/feeds/posts/summary/-/Jquery?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script src='/feeds/posts/summary/-/Jquery Ui?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script>
            showBacaJuga("https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html");
        </script>
<div id='share-container'>
<div class='share-title'>
<p class='share-this-pleaseeeee'>Share</p>
</div>
<div id='share'>
<a aria-label='facebook' class='facebook' href='//www.facebook.com/sharer.php?u=https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html' rel='nofollow noreferrer' title='facebook'>
<svg viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path>
</svg>
</a>
<a aria-label='twitter' class='twitter' href='//twitter.com/intent/tweet?text=How Can I Bind To The Change Event Of A Textarea In Jquery?&url=https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html' rel='nofollow noreferrer' title='twitter'>
<svg viewBox='0 0 24 24'>
<path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path>
</svg>
</a>
<a aria-label='pinterest' class='pinterest' href='//pinterest.com/pin/create/button/?url=https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html&media=&description=How Can I Bind To The Change Event Of A Textarea In Jquery?' rel='nofollow noreferrer' title='pinterest'>
<svg viewBox='0 0 24 24'>
<path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path>
</svg>
</a>
<a aria-label='whatsapp' class='whatsapp' href='//api.whatsapp.com/send?phone=&text=How Can I Bind To The Change Event Of A Textarea In Jquery?%20%2D%20https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html' rel='nofollow noreferrer' title='whatsapp'>
<svg viewBox='0 0 24 24'>
<path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path>
</svg>
</a>
<a aria-label='telegram' class='telegram' href='https://t.me/share/url?url=https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html&text=How Can I Bind To The Change Event Of A Textarea In Jquery?' rel='nofollow noreferrer' target='_blank' title='telegram'>
<svg viewBox='0 0 24 24'>
<path d='M19.4 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001l-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15l4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'></path>
</svg>
</a>
</div>
</div>
<div id='ms-related-post'></div>
<script>
        var postLabels = ["Javascript", "Jquery", "Jquery Ui", ];
        var relatedConfig = {
            postUrl: "https://goggleeyecup.blogspot.com/2024/07/how-can-i-bind-to-change-event-of.html",
            homePageUrl: "https://goggleeyecup.blogspot.com/",
            relatedTitleText: "You may like these posts",
        }; 
        </script>
<div id='ms-matched-content'></div>
<script>
            //<![CDATA[	
            // related post js from www.dte.web.id modified by sugeng.id
                !function(){var e,b={relatedTitleOuterOpen:'<div class="related-title"><p class="ms-title">',relatedTitleOuterClose:"</p></div>",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrqnuv9skycIS-QIsbFJK7D54TnKmvBKOxbztzriCwOmq48jpN-FdvwvEYXo1VglJXWRAl-zGqxenKZXe_rzqWKIrwz84fQ2XL-XxQaJvIzlSPjWd515SDiWXY7qd0DZGU0rMduc-Hv0/w192-h108-n-k-rw-no-nu/nomage+%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0<postLabels.length?"/-/"+v(postLabels)[0]:"");l=l.replace("&","&"),msRelatedPosts=function(e){var t,l,a,s,r,d,o,n,i=b.relatedTitleOuterOpen+B.judulRelatedPosts+b.relatedTitleOuterClose,A=document.getElementById(b.relatedOuter),m=v(e.feed.entry);i+=1==B.relatedPostsThumb?'<ul class="ms-related-hasthumb">':'<ul class="ms-related-nothumb">';for(var u=0;u<m.length;u++)for(var h=0,c=m[u].link.length;h<c;h++)m[u].link[h].href==b.postUrl&&m.splice(u,1);if(0<m.length){for(var g=0;g<B.jumlahRelatedPosts&&g<m.length;g++){l=m[g].title.$t,void 0!==m[g].content&&(r=(s=m[g].content.$t).indexOf("<img",0));function f(e){a=e.replace(/.*?:\/\//g,"//").replace(/s72-(c|.*?-c)/,"w"+b.thumbWidth+"-h"+b.thumbHeight+"-c-rw")}"media$thumbnail"in m[g]?f(m[g].media$thumbnail.url):void 0!==r&&-1!==r?(d=s.indexOf("/>",r),o=(d=s.slice(r,d)).indexOf("src=",0)+5,n=d.indexOf('"',o),f(d.slice(o,n))):a=B.relatedPostsNoThumbImg;for(var p=0,c=m[g].link.length;p<c;p++)t="alternate"==m[g].link[p].rel?m[g].link[p].href:"#";i+='<li><a title="'+l+'" href="'+t+'">'+(1==B.relatedPostsThumb?'<div class="related-thumb-outer"><img alt="'+l+'" class="related-thumb" src="'+a+'" width="'+b.thumbWidth+'" height="'+b.thumbHeight+'"></div>':"")+('<div class="related-title-outer">'+l+"</div>")+"</a></li>"}1==B.relatedPosts&&(A.innerHTML=i+="</ul>")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1<e?1+Math.floor(Math.random()*e):1;t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/default"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+(B.jumlahRelatedPosts+1)+"&callback=msRelatedPosts")},t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=msRandomIndex")}();
                function fullwidthImg(){var t=document.querySelector(".post-body img"),l=document.querySelector(".post-body > .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}();
            //]]>		  
        </script>
</div>
<section class='comments comments-non-threaded embed' data-num-comments='0' id='comments'>
<a name='comments'></a>
<h2 class='comments-title'>
Post a Comment
for  "How Can I Bind To The Change Event Of A Textarea In Jquery?"
            </h2>
<div id='Blog1_comments-block-wrapper'>
</div>
<div class='comment-footer'>
<div class='comment-form default-comment-form'>
<a name='comment-form'></a>
<a aria-label='comment form' href='https://www.blogger.com/comment/frame/4253801061066118495?po=6443430353992044177&hl=en&saa=84935&skin=contempo' id='comment-editor-src'></a>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' title='comment-editor' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/681870030-comment_from_post_iframe.js' type='text/javascript'></script>
<script>
            BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
        </script>
</div>
</div>
</section>
</article>
</div>
</div></div>
<div class='iklan-atas section' id='iklan-atas'><div class='widget HTML' data-version='2' id='HTML76'>
<div class='widget-content kode-iklan-atas'>
<script type="text/javascript">
	atOptions = {
		'key' : '365d5ac5cd4e9ff093a5907e9ad650e2',
		'format' : 'iframe',
		'height' : 250,
		'width' : 300,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/365d5ac5cd4e9ff093a5907e9ad650e2/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='iklan-tengah1 section' id='iklan-tengah1'><div class='widget HTML' data-version='2' id='HTML77'>
<div class='widget-content kode-iklan-tengah'>
<script type="text/javascript">
	atOptions = {
		'key' : 'edd748cb9b42467680df52aa8ab2d846',
		'format' : 'iframe',
		'height' : 60,
		'width' : 468,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/edd748cb9b42467680df52aa8ab2d846/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='iklan-tengah2 section' id='iklan-tengah2'><div class='widget HTML' data-version='2' id='HTML78'>
<div class='widget-content kode-iklan-tengah'>
<script type="text/javascript">
	atOptions = {
		'key' : 'edd748cb9b42467680df52aa8ab2d846',
		'format' : 'iframe',
		'height' : 60,
		'width' : 468,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/edd748cb9b42467680df52aa8ab2d846/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='iklan-bawah section' id='iklan-bawah'><div class='widget HTML' data-version='2' id='HTML79'>
<div class='widget-content kode-iklan-bawah'>
<script type="text/javascript">
	atOptions = {
		'key' : '63a77c42756762736b0155173bf1a66d',
		'format' : 'iframe',
		'height' : 50,
		'width' : 320,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/63a77c42756762736b0155173bf1a66d/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='matched-content section' id='matched-content'><div class='widget HTML' data-version='2' id='HTML939'>
<div class='widget-content kode-matched-content'>
</div>
</div></div>
<script>//<![CDATA[
        function LMmiddleAds(a){function e(e,n,l){function t(e,n){void 0!==n&&n.parentNode.insertBefore(e,n.nextSibling)}if(1<d.length){null!=e&&"\n"!=e.innerHTML&&t(e,null!==n?n:d[l]);for(var i,r=a.querySelectorAll(".post-body-artikel .kode-iklan-tengah"),o=0;o<r.length;o++)null!==(i=r[o].previousElementSibling)&&"BR"===i.tagName&&(i.style.display="none")}else e.parentNode.removeChild(e)}var n=a.querySelector(".post-body"),d=n.querySelectorAll("div > br, span > br, div > p, span > p"),l=Math.ceil(.2*d.length),t=Math.ceil(.7*d.length),i=a.querySelector("#iklan-tengah1 .widget-content"),r=a.querySelector("#iklan-tengah2 .widget-content"),o=a.querySelector("#iklan-atas .widget-content"),c=a.querySelector("#iklan-bawah .widget-content"),u=n.querySelector("#iklan1"),g=n.querySelector("#iklan2");null!=o&&"\n"!=o.innerHTML&&n.insertBefore(o,n.childNodes[0]),null!=c&&"\n"!=c.innerHTML&&n.appendChild(c);e(i,u,l),e(r,g,t)}LMmiddleAds(document);
        function matchedAds(){var e,n,t={iklanMatched:!0};optionLinkMagz(t),e=document.querySelector("#ms-matched-content"),n=document.querySelector("#matched-content .widget-content"),null!=e?1==t.iklanMatched&&null!=n&&"\n"!=n.innerHTML&&e.appendChild(n):n.parentNode.removeChild(n)}matchedAds();
        //]]>
        </script>
</section>
<aside id='sidebar-wrap'>
<div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='2' id='HTML1'>
<div class='widget-content'>
<script type="text/javascript">
	atOptions = {
		'key' : 'b3cbedc3153259c38733a80008471667',
		'format' : 'iframe',
		'height' : 600,
		'width' : 160,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/b3cbedc3153259c38733a80008471667/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div><div class='widget PopularPosts' data-version='2' id='PopularPosts1'>
<div class='popular-post-widget-title'>
<h2 class='title'>Top Question</h2>
</div>
<div class='widget-content'>
<div class='popular-posts-wrap'>
<div class='the-most-popular'>
<div class='popular-post-thumbnail'>
<a href='https://goggleeyecup.blogspot.com/2022/08/can-i-use-id-of-html-element-as.html'>
<img alt='Image' class='lazyload' data-src='//1.bp.blogspot.com/-sLMytth04W8/XtoBMx9lUjI/AAAAAAAAHmM/zK-toM5XTacePvBHnpIO_tfzjg63BD3ZgCK4BGAsYHg/w300-h168-p-k-no-nu/nomage%2B%25281%2529.png' height='169' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=' width='300'/>
<div class='lazy-loading'></div>
</a>
</div>
<div class='popular-post-info info-has-thumbnail'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/08/can-i-use-id-of-html-element-as.html'>
Can I Use The Id Of An HTML Element As A Variable In JavaScript?
</a>
</p>
<div class='popular-post-snippet'>
Accidentally, I noticed I could use the id of an HTML eleme…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/08/jquery-autocomplete-combine-data.html'>
Jquery Autocomplete - Combine Data Sources - Primary And Fallback
</a>
</p>
<div class='popular-post-snippet'>
I searched the forums but didn't find any answers to th…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/06/creating-26-alphabet-letter-buttons.html'>
Creating 26 Alphabet Letter Buttons With The For Loop And String.fromCharCode()
</a>
</p>
<div class='popular-post-snippet'>
here is some HTML Code as example: A  B    Solution 1:    T…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/06/change-html-name-attribute-using.html'>
Change HTML Name Attribute Using JavaScript
</a>
</p>
<div class='popular-post-snippet'>
On the press of a div (which I made into a button with othe…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/06/google-web-designer-dynamically-adjust.html'>
Google Web Designer Dynamically Adjust Opacity In Source Code
</a>
</p>
<div class='popular-post-snippet'>
Right now I currently have a slider and two images on my Go…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/06/i-cannot-access-fields-in-my-object.html'>
I Cannot Access Fields In My Object Directly Or With A Getter Function
</a>
</p>
<div class='popular-post-snippet'>
I've been banging my head against the wall on this triv…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/07/animating-frame-resizing.html'>
Animating Frame Resizing
</a>
</p>
<div class='popular-post-snippet'>
Is it possible to animate the re-sizing of a frame in html?…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/06/yarn-error-there-are-no-scenarios-must.html'>
Yarn ERROR: There Are No Scenarios; Must Have At Least One
</a>
</p>
<div class='popular-post-snippet'>
I tried to install Yarn and when I used the yarn command I …
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2024/05/module-not-found-you-attempted-to.html'>
Module Not Found: You Attempted To Import Which Falls Outside Of The Project Src/ Directory. Relative Imports Outside Of Src/ Are Not Supported
</a>
</p>
<div class='popular-post-snippet'>
I have just started React JS, but I have a problem and desp…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://goggleeyecup.blogspot.com/2022/06/how-to-resize-textarea-according-to.html'>
How To Resize Textarea According To Content
</a>
</p>
<div class='popular-post-snippet'>
I am adding the content to a textarea programmatically as s…
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class='sidebar-sticky section' id='sidebar-sticky'><div class='widget BlogArchive' data-version='2' id='BlogArchive1'>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<div class='archive-flat'>
<ul>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/12/'>
December 2024
<span class='post-count'>(1)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/11/'>
November 2024
<span class='post-count'>(38)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/10/'>
October 2024
<span class='post-count'>(71)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/09/'>
September 2024
<span class='post-count'>(23)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/08/'>
August 2024
<span class='post-count'>(371)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/07/'>
July 2024
<span class='post-count'>(339)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/06/'>
June 2024
<span class='post-count'>(719)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/05/'>
May 2024
<span class='post-count'>(1292)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/04/'>
April 2024
<span class='post-count'>(802)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/03/'>
March 2024
<span class='post-count'>(1547)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/02/'>
February 2024
<span class='post-count'>(1700)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2024/01/'>
January 2024
<span class='post-count'>(1362)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/12/'>
December 2023
<span class='post-count'>(1380)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/11/'>
November 2023
<span class='post-count'>(407)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/10/'>
October 2023
<span class='post-count'>(397)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/09/'>
September 2023
<span class='post-count'>(271)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/08/'>
August 2023
<span class='post-count'>(353)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/07/'>
July 2023
<span class='post-count'>(271)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/06/'>
June 2023
<span class='post-count'>(386)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/05/'>
May 2023
<span class='post-count'>(217)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/04/'>
April 2023
<span class='post-count'>(131)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/03/'>
March 2023
<span class='post-count'>(139)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/02/'>
February 2023
<span class='post-count'>(181)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2023/01/'>
January 2023
<span class='post-count'>(273)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/12/'>
December 2022
<span class='post-count'>(126)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/11/'>
November 2022
<span class='post-count'>(230)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/10/'>
October 2022
<span class='post-count'>(167)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/09/'>
September 2022
<span class='post-count'>(164)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/08/'>
August 2022
<span class='post-count'>(488)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/07/'>
July 2022
<span class='post-count'>(307)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://goggleeyecup.blogspot.com/2022/06/'>
June 2022
<span class='post-count'>(284)</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div></div>
</aside>
</main>
<div id='footer-widget-html-wrap'>
<div class='footer-widget-html section' id='footer-widget-html'><div class='widget HTML' data-version='2' id='HTML831'>
</div></div>
</div>
<footer id='footer-outer'>
<div id='footer-content'>
<div class='page-navmenu section' id='page-navmenu'><div class='widget PageList' data-version='2' id='PageList1'>
<div class='normalwidget-title'>
<h2 class='title'>Menu Halaman Statis</h2>
</div>
<div class='widget-content'>
<ul>
<li>
<a href='https://goggleeyecup.blogspot.com/'>Beranda</a>
</li>
</ul>
</div>
</div></div>
<div class='footer-text section' id='footer-text'><div class='widget HTML' data-version='2' id='HTML80'>
<div class='footer-text'>

© 2022 - <a href='https://goggleeyecup.blogspot.com/'>javascript sammlung </a>
</div>
</div></div>
<div class='navbarrr section' id='navbarrr'><div class='widget Navbar' data-version='2' id='Navbar1'><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: 'https://www.blogger.com/navbar/4253801061066118495?po\x3d6443430353992044177\x26origin\x3dhttps://goggleeyecup.blogspot.com',
              where: document.getElementById("navbar-iframe-container"),
              id: "navbar-iframe"
          });
        }
      });
    </script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
</div>
</footer>
<a aria-label='Go To Top' href='#' id='goTop'>
</a>
<script>
            //<![CDATA[
            /*! smooth-scroll js from Chris Ferdinandi (http://github.com/cferdinandi/smooth-scroll) */
            !function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof exports?module.exports=t(e):e.SmoothScroll=t(e)}("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,function(E){"use strict";function b(){var n={};return Array.prototype.forEach.call(arguments,function(e){for(var t in e){if(!e.hasOwnProperty(t))return;n[t]=e[t]}}),n}function i(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,a=-1,r="",i=n.charCodeAt(0);++a<o;){if(0===(t=n.charCodeAt(a)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");r+=1<=t&&t<=31||127==t||0===a&&48<=t&&t<=57||1===a&&48<=t&&t<=57&&45===i?"\\"+t.toString(16)+" ":128<=t||45===t||95===t||48<=t&&t<=57||65<=t&&t<=90||97<=t&&t<=122?n.charAt(a):"\\"+n.charAt(a)}return"#"+r}function O(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)}function I(e,t,n,o){t.emitEvents&&"function"==typeof E.CustomEvent&&(t=new CustomEvent(e,{bubbles:!0,detail:{anchor:n,toggle:o}}),document.dispatchEvent(t))}var M={ignore:"[data-scroll-ignore]",header:null,topOnEmptyHash:!0,speed:500,speedAsDuration:!1,durationMax:null,durationMin:null,clip:!0,offset:0,easing:"easeInOutCubic",customEasing:null,updateURL:!0,popstate:!0,emitEvents:!0};return function(a,e){function t(e){if(!e.defaultPrevented&&!(0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey)&&"closest"in e.target&&(r=e.target.closest(a))&&"a"===r.tagName.toLowerCase()&&!e.target.closest(g.ignore)&&r.hostname===E.location.hostname&&r.pathname===E.location.pathname&&/#/.test(r.href)){var t;try{n=i(decodeURIComponent(r.hash))}catch(e){n=i(r.hash)}if("#"===n){if(!g.topOnEmptyHash)return;t=document.documentElement}else t=document.querySelector(n);(t=t||"#top"!==n?t:document.documentElement)&&(e.preventDefault(),n=g,history.replaceState&&n.updateURL&&!history.state&&(o=(o=E.location.hash)||"",history.replaceState({smoothScroll:JSON.stringify(n),anchor:o||E.pageYOffset},document.title,o||E.location.href)),v.animateScroll(t,r))}var n,o}function n(e){var t;null===history.state||!history.state.smoothScroll||history.state.smoothScroll!==JSON.stringify(g)||"string"==typeof(t=history.state.anchor)&&t&&!(t=document.querySelector(i(history.state.anchor)))||v.animateScroll(t,null,{updateURL:!1})}var g,r,y,S,v={cancelScroll:function(e){cancelAnimationFrame(S),S=null,e||I("scrollCancel",g)}};v.animateScroll=function(o,a,e){v.cancelScroll();var r,i,s,c,u,l,d,f,m,t,h=b(g||M,e||{}),p="[object Number]"===Object.prototype.toString.call(o),e=p||!o.tagName?null:o;(p||e)&&(r=E.pageYOffset,h.header&&!y&&(y=document.querySelector(h.header)),t=(t=y)?parseInt(E.getComputedStyle(t).height,10)+t.offsetTop:0,c=p?o:function(e,t,n,o){var a=0;if(e.offsetParent)for(;a+=e.offsetTop,e=e.offsetParent;);return a=Math.max(a-t-n,0),a=o?Math.min(a,O()-E.innerHeight):a}(e,t,parseInt("function"==typeof h.offset?h.offset(o,a):h.offset,10),h.clip),u=c-r,l=O(),d=0,t=(e=h).speedAsDuration?e.speed:Math.abs(u/1e3*e.speed),f=e.durationMax&&t>e.durationMax?e.durationMax:e.durationMin&&t<e.durationMin?e.durationMin:parseInt(t,10),m=function(e){var t,n;d+=e-(i=i||e),s=r+u*(t=s=1<(s=0===f?0:d/f)?1:s,"easeInQuad"===h.easing&&(n=t*t),"easeOutQuad"===h.easing&&(n=t*(2-t)),"easeInOutQuad"===h.easing&&(n=t<.5?2*t*t:(4-2*t)*t-1),"easeInCubic"===h.easing&&(n=t*t*t),"easeOutCubic"===h.easing&&(n=--t*t*t+1),"easeInOutCubic"===h.easing&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===h.easing&&(n=t*t*t*t),"easeOutQuart"===h.easing&&(n=1- --t*t*t*t),"easeInOutQuart"===h.easing&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===h.easing&&(n=t*t*t*t*t),"easeOutQuint"===h.easing&&(n=1+--t*t*t*t*t),"easeInOutQuint"===h.easing&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),(n=h.customEasing?h.customEasing(t):n)||t),E.scrollTo(0,Math.floor(s)),function(e,t){var n=E.pageYOffset;if(e==t||n==t||(r<t&&E.innerHeight+n)>=l)return v.cancelScroll(!0),e=t,n=p,0===(t=o)&&document.body.focus(),n||(t.focus(),document.activeElement!==t&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),E.scrollTo(0,e)),I("scrollStop",h,o,a),!(S=i=null)}(s,c)||(S=E.requestAnimationFrame(m),i=e)},0===E.pageYOffset&&E.scrollTo(0,0),e=o,p||history.pushState&&h.updateURL&&history.pushState({smoothScroll:JSON.stringify(h),anchor:e.id},document.title,e===document.documentElement?"#top":"#"+e.id),"matchMedia"in E&&E.matchMedia("(prefers-reduced-motion)").matches?E.scrollTo(0,Math.floor(c)):(I("scrollStart",h,o,a),v.cancelScroll(!0),E.requestAnimationFrame(m)))};if(v.destroy=function(){g&&(document.removeEventListener("click",t,!1),E.removeEventListener("popstate",n,!1),v.cancelScroll(),S=y=r=g=null)},"querySelector"in document&&"addEventListener"in E&&"requestAnimationFrame"in E&&"closest"in E.Element.prototype)return v.destroy(),g=b(M,e||{}),y=g.header?document.querySelector(g.header):null,document.addEventListener("click",t,!1),g.updateURL&&g.popstate&&E.addEventListener("popstate",n,!1),v;throw"Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs."}});
            var LMstickyMenu=function(){var t=document.querySelector("#header-outer").getBoundingClientRect().height,n=document.querySelector("#navmenu-wrap-sticky"),e=document.querySelector(".nav-copy"),i=document.querySelector(".nav-original"),r=document.querySelector(".sidebar-sticky");stickyClass="navsticky-show",null!=i&&(e.innerHTML=i.innerHTML);null!=i&&(window.addEventListener("resize",function(){t=document.querySelector("#header-outer").getBoundingClientRect().height}),window.addEventListener("scroll",function(){var e=Math.round(window.pageYOffset);t<=e?n.classList.add(stickyClass):n.classList.remove(stickyClass)})),null!=r&&(r.style.top="88px");for(var c=document.querySelectorAll(".menu-sticky a"),o=0;o<c.length;o++)c[o].setAttribute("tabindex","-1")};!function(){var e={menuSticky:!0};optionLinkMagz(e),1==e.menuSticky&&LMstickyMenu()}();
            function LMmobileMenu(){function e(e){e.preventDefault,i.classList.add(o)}for(var n=document.querySelector(".navmenu-content"),t=document.querySelector("#navmenu-sidebar-body"),u=document.querySelectorAll(".navmenu-button"),l=document.querySelector("#navmenu-overlay"),s=document.querySelector("#navmenu-sidebar-closebtn"),i=document.querySelector("#navmenu"),o="navmenu-activated",r=(null!==n&&(t.innerHTML=n.innerHTML),0);r<u.length;r++)u[r].addEventListener("click",e);function c(e){e.preventDefault,i.classList.remove(o)}null!==l&&l.addEventListener("click",c),null!==s&&s.addEventListener("click",c)}function LMmobileMenuSubMenu(){"use strict";for(var e=document.querySelectorAll("#navmenu-sidebar-body li.has-sub"),n=function(e){var n=this.nextElementSibling,t=n.scrollHeight;n.clientHeight?(n.style.height="0px",this.classList.remove("ms-submenu-shown")):(n.style.height=t+"px",this.classList.add("ms-submenu-shown"))},t=0;t<e.length;t++){u=void 0,(u=document.createElement("span")).setAttribute("class","ms-submenu-button");var u,l=e[t].querySelector("ul");e[t].insertBefore(u,e[t].lastElementChild),l&&(l.style.height="0",l.style.overflow="hidden"),u.addEventListener("click",n)}}LMmobileMenu(),LMmobileMenuSubMenu();
            function LMsearchForm(){for(var n=document.getElementById("searchcontainer"),t=document.getElementById("search-terms"),e=document.querySelectorAll(".iconsearch-label"),c=0;c<e.length;c++)e[c].addEventListener("click",function(e){n.classList.toggle("opensearch"),n.classList.contains("opensearch")||(t.blur(),e.preventDefault()),e.stopPropagation()},!1);t.addEventListener("click",function(e){e.stopPropagation()},!1),document.addEventListener("click",function(e){n.classList.remove("opensearch"),t.blur(),e.stopPropagation()},!1),document.addEventListener("keydown",function(e){"Escape"==e.key&&(n.classList.remove("opensearch"),t.blur())})}LMsearchForm();
            function LMcheckCheckbox(){for(var e=document.querySelectorAll(".checkbox"),o=0;o<e.length;o++)"darkmode"===localStorage.getItem("mode")?e[o].checked=!0:e[o].checked=!1}function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),LMcheckCheckbox()}LMcheckCheckbox();
            !function(){var e=document.querySelectorAll(".darkmode-switch"),o={tombolDarkmode:!0};if(optionLinkMagz(o),0==o.tombolDarkmode)for(var l=0;l<e.length;l++)e[l].parentNode.removeChild(e[l]);else for(l=0;l<e.length;l++)e[l].style.display="flex"}();
            var LMScrollTop=function(){var o=document.querySelector("#goTop");window.addEventListener("scroll",function(){300<=window.pageYOffset?o.classList.add("is-visible"):o.classList.remove("is-visible")})};!function(){var o={scrollToTop:!0};optionLinkMagz(o),1==o.scrollToTop&&LMScrollTop()}();
            !function(){var r,e=document.querySelector(".featured-img-bg");function t(e){let t=r.getAttribute(e);t&&(t=t.replace(/-p-k-no-nu/g,"-c-rw"),r.setAttribute(e,t))}e&&(r=e.querySelector("img"),t("data-src"),t("srcset"))}();
            //]]>
            
            
            
                //<![CDATA[
                /* TOC js from www.cssscript.com/generating-a-table-of-contents-with-pure-javascript-toc */
                !function(e){function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n,c,l,a,o=location.hash;return o&&setTimeout(function(){location.hash="",location.hash=o},0),e=(t=e).selector,n=t.scope,c=document.createElement("ol"),l=c,a=i(t.overwrite,t.prefix),r(e,n).reduce(function(e,t,n){var o=u(t.tagName),e=d(l,o-e)||c,r=document.createElement("li"),i=document.createElement("a");return a(t,i,n),e.appendChild(r).appendChild(i),l=r,o},u(e)),c}var r=function(t,e){var n=[],e=document.querySelectorAll(e);return Array.prototype.forEach.call(e,function(e){e=e.querySelectorAll(t);n=n.concat(Array.prototype.slice.call(e))}),n},u=function(e){if("string"!=typeof e)return 0;e=e.match(/\d/g);return e?Math.min.apply(null,e):1},d=function(e,t){if(t<0)return d(e.parentElement,t+1);if(0<t){for(var n=e,o=t;o--;){var r=document.createElement("ol");n.appendChild(r),n=r}return n}return e.parentElement},i=function(o,r){return function(e,t,n){e.textContent;n=r+"-"+n,t.textContent=e.textContent,n=!o&&e.id||n,n=encodeURIComponent(n);e.id=n,t.href="#"+n}};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});function tocShowHide(){var t={tocHide:!0,showText:"(show)",hideText:"(hide)"},e=(optionLinkMagz(t),document.querySelector(".toc")),n=document.createElement("button"),o=document.querySelector("#toc ol");e.appendChild(n),o.style.height="0",o.style.overflow="hidden",n.innerHTML=t.showText,n.addEventListener("click",function(){var e=o.scrollHeight;o.clientHeight?(o.style.height="0",n.innerHTML=t.showText):(o.style.height=e+"px",n.innerHTML=t.hideText)})}function tocOption(){var e=document.querySelector(".toc"),t={judulTOC:"Daftar Isi",showHideTOC:!0};optionLinkMagz(t),null!=e&&(e.innerHTML=t.judulTOC),tocShowHide()}null!=aside&&(aside.appendChild(toc),tocOption());
                //]]>
            
            //<![CDATA[
                Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"}),"undefined"!=typeof infinite_scroll&&infinite_scroll.on("load",function(){Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"})});var scroll=new SmoothScroll('a[href*="#"]',{speed:600,speedAsDuration:!0,easing:"easeInOutCubic"});
            //]]>
        </script>
<div class='custom-javascript-footer section' id='custom-javascript-footer'><div class='widget HTML' data-version='2' id='HTML85'>
</div></div>