Change Content Of A Div On Another Page

August 21, 2024 Post a Comment

On page 1, I have a div containing information.

And on page 2, I have a form with a textarea and a button.

<h2 id="solution_1">Solution 1:

</h2><div class="answer-desc"><p>One way is to do like what the other answers mentioned, to have each tab communicate to a central server that will get/send data to keep both tabs updated using AJAX for example. </p><p>But I'm here to tell you about another way though, it's to use what we already have designed for this kind of task exactly. What so called browser <strong><code>localStorage</code></strong></p><p>Browser storage works like this pseudo code:</p><a name='more'></a><pre><code id="code_1" class="hljs language-javascript"><span class="hljs-comment">//set the value, it works as a hash map or assoc array. </span><span class="hljs-variable language_">localStorage</span> .<span class="hljs-title function_">setItem</span>(<span class="hljs-string">"some_index_key"</span>, <span class="hljs-string">"some data"</span>) ; 
   <span class="hljs-comment">// get the value by it's index key. </span><span class="hljs-variable language_">localStorage</span> .<span class="hljs-title function_">getItem</span>(<span class="hljs-string">"some_index_key"</span>) ; <span class="hljs-comment">// will get you "some data" </span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_1')">Copy</button></pre><p>Where all the data will be shared among all open tabs for the same domain. And you can add event listener so whenever one value change, it will be reflected on all tabs.</p><pre><code id="code_2" class="hljs language-javascript"><span class="hljs-title function_">addEvent</span>(<span class="hljs-variable language_">window</span>, <span class="hljs-string">'storage'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) {
  <span class="hljs-keyword">if</span> (event.<span class="hljs-property">key</span> == <span class="hljs-string">'some_index_key'</span>) {
    output.<span class="hljs-property">innerHTML</span> = event.<span class="hljs-property">newValue</span>;
  }
});

<span class="hljs-title function_">addEvent</span>(myInputField, <span class="hljs-string">'keyup'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
  <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">'some_index_key'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>);
});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_2')">Copy</button></pre><p><strong>Check out this <a rel="nofollow noreferrer noopener" href="http://html5demos.com/storage-events">DEMO</a>, you edit one field on page-A, and that value will be reflected on page-B offline without the need to burden the network.</strong></p><p>To learn more, <a rel="nofollow noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">read this</a>. </p><p><strong>Real live example. The background color is controlled from another tab.</strong></p><p></p><div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"><code id="code_3" class="hljs language-javascript"><span class="hljs-keyword">var</span> screenone = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'screenone'</span>);

screenone.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'keydown'</span>, screenOneFunction);
            screenone.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, screenOneFunction);
           
    <span class="hljs-keyword">function</span><span class="hljs-title function_">screenOneFunction</span>(<span class="hljs-params"></span>)
            {
                <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>;
                <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">"color1"</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>);
            }
            
            
            
            <span class="hljs-keyword">var</span> screentwo = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'screentwo'</span>);

screentwo.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'keydown'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">evt</span>) {
                <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">"color2"</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>);
            });
            screentwo.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">evt</span>) {
                <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">"color2"</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>);
            });

<span class="hljs-keyword">var</span> thebutton = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'thebutton'</span>);

thebutton.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">evt</span>) {
                <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">clear</span>();
                screenone.<span class="hljs-property">value</span> = <span class="hljs-string">""</span>;
                screentwo.<span class="hljs-property">value</span> = <span class="hljs-string">""</span>;
                <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">""</span>;
            });

<span class="hljs-keyword">var</span> storageHandler = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
                <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-property">color2</span>;
                <span class="hljs-keyword">var</span> color1 = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-property">color1</span>;
                <span class="hljs-keyword">var</span> color2 = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-property">color2</span>;
                screenone.<span class="hljs-property">value</span> = color2;
                screentwo.<span class="hljs-property">value</span> = color1;

};
            <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"storage"</span>, storageHandler, <span class="hljs-literal">false</span>);</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_3')">Copy</button></pre><pre class="snippet-code-css lang-css prettyprint-override"><code id="code_4" class="hljs language-css"><span class="hljs-selector-class">.screenone</span>{ <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;}
       <span class="hljs-selector-tag">input</span>{ <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">250px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">border</span>:round}
      <span class="hljs-selector-tag">label</span>{<span class="hljs-attribute">margin</span>: <span class="hljs-number">15px</span>;}</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_4')">Copy</button></pre><pre class="snippet-code-html lang-html prettyprint-override"><code id="code_5" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span><span class="hljs-tag"><<span class="hljs-name">head</span>></span><span class="hljs-tag"></<span class="hljs-name">head</span>></span><span class="hljs-tag"><<span class="hljs-name">body</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span>></span> Type a color name e.g. red. Or enter a color hex code e.g. #001122 <span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span><span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span><span class="hljs-attr">class</span>=<span class="hljs-string">"screenone"</span><span class="hljs-attr">id</span>=<span class="hljs-string">"screenone"</span> /></span><span class="hljs-tag"><<span class="hljs-name">label</span>></span> This tab <span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span><span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span><span class="hljs-attr">class</span>=<span class="hljs-string">"screentwo"</span><span class="hljs-attr">id</span>=<span class="hljs-string">"screentwo"</span> /></span><span class="hljs-tag"><<span class="hljs-name">label</span>></span> Other opned tabs <span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span><span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span><span class="hljs-attr">class</span>=<span class="hljs-string">" "</span><span class="hljs-attr">id</span>=<span class="hljs-string">"thebutton"</span><span class="hljs-attr">value</span>=<span class="hljs-string">"clear"</span> /></span><span class="hljs-tag"></<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_5')">Copy</button></pre></div></div></div><h2 id="solution_2">Solution 2:

</h2><div class="answer-desc"><p>Hope this will give you an idea of how you can do it:</p><h2>Page 2</h2><p><strong>HTML</strong></p><pre><code id="code_6" class="hljs language-bash"><form>
  <textarea <span class="hljs-built_in">id</span>=<span class="hljs-string">'new-info'</span>></textarea>
  <input <span class="hljs-built_in">type</span>=<span class="hljs-string">'submit'</span><span class="hljs-built_in">id</span>=<span class="hljs-string">'submit-info'</span> value=<span class="hljs-string">'pass'</span>/>
</form>
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_6')">Copy</button></pre><p><strong>JS</strong></p><pre><code id="code_7" class="hljs language-javascript">$(<span class="hljs-string">"form"</span>).<span class="hljs-title function_">submit</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){

e.<span class="hljs-title function_">preventDefault</span>();

$.<span class="hljs-title function_">post</span>(<span class="hljs-string">'save_data.php'</span>, { <span class="hljs-attr">new_info</span>:$(<span class="hljs-string">"#new-info"</span>).<span class="hljs-title function_">val</span>() }).<span class="hljs-title function_">done</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>){
         <span class="hljs-comment">// Do something if you want to show that form has been sent</span>
    });

});
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_7')">Copy</button></pre><p><strong>save_data.php</strong></p><pre><code id="code_8" class="hljs language-php"><span class="hljs-meta"><?php</span><span class="hljs-keyword">if</span> (<span class="hljs-keyword">isset</span>(<span class="hljs-variable">$_POST</span>[<span class="hljs-string">'new-info'</span>])) {

<span class="hljs-comment">// Update value in DB</span>

}

<span class="hljs-meta">?></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_8')">Copy</button></pre><h2>Page 1</h2><p><strong>HTML</strong></p><pre><code id="code_9" class="hljs language-bash"><div <span class="hljs-built_in">id</span>=<span class="hljs-string">'information'</span>>
</div>
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_9')">Copy</button></pre><p><strong>JS</strong></p><pre><code id="code_10" class="hljs language-javascript"><span class="hljs-built_in">setInterval</span>(search_after_info, <span class="hljs-number">1000</span>);

<span class="hljs-keyword">function</span><span class="hljs-title function_">search_after_info</span>(<span class="hljs-params"></span>) {

$.<span class="hljs-title function_">get</span>(<span class="hljs-string">'get_data'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) {

$(<span class="hljs-string">"#information"</span>).<span class="hljs-title function_">html</span>(data);

});

}
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_10')">Copy</button></pre></div><h2 id="solution_3">Solution 3:

</h2><div class="answer-desc"><p>You mean some thing like this ?</p><pre><code id="code_11" class="hljs language-javascript">$(<span class="hljs-string">"#submit-info"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">var</span> content = $(<span class="hljs-string">"#new-info"</span>).<span class="hljs-title function_">text</span>();
   $(<span class="hljs-string">"#information"</span>).<span class="hljs-title function_">html</span>(content);
  });
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_11')">Copy</button></pre><p>If you thing about server side, tell more about technology, which you use.</p></div><h2 id="solution_4">Solution 4:

</h2><div class="answer-desc"><p>This is exactly as the following:
Page 1:</p><pre><code id="code_12" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">form</span><span class="hljs-attr">action</span>=<span class="hljs-string">"test2.htm"</span><span class="hljs-attr">method</span>=<span class="hljs-string">"get"</span>></span><span class="hljs-tag"><<span class="hljs-name">textarea</span><span class="hljs-attr">name</span> =<span class="hljs-string">'new-info'</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span><span class="hljs-attr">type</span> = <span class="hljs-string">'submit'</span><span class="hljs-attr">id</span>=<span class="hljs-string">'submit-info'</span><span class="hljs-attr">value</span> =<span class="hljs-string">'pass'</span><span class="hljs-attr">onclick</span>=<span class="hljs-string">"postData();"</span>/></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_12')">Copy</button></pre><p></p><p>Page 2</p><pre><code id="code_13" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span><span class="hljs-attr">id</span>=<span class="hljs-string">"information"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-keyword">if</span> (location.<span class="hljs-property">search</span> != <span class="hljs-string">""</span>)
        {
            <span class="hljs-keyword">var</span> x = location.<span class="hljs-property">search</span>.<span class="hljs-title function_">substr</span>(<span class="hljs-number">1</span>).<span class="hljs-title function_">split</span>(<span class="hljs-string">";"</span>)
            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i<x.<span class="hljs-property">length</span>; i++)
            {
                <span class="hljs-keyword">var</span> y = x[i].<span class="hljs-title function_">split</span>(<span class="hljs-string">"="</span>);
                <span class="hljs-keyword">var</span><span class="hljs-title class_">DataValue</span> = y[<span class="hljs-number">1</span>];
                <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"information"</span>).<span class="hljs-property">innerHTML</span>  = <span class="hljs-title class_">DataValue</span>;
            }
        }

</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></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>
            showBacaJuga("https://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.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://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.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=Change Content Of A Div On Another Page&url=https://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.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://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.html&media=&description=Change Content Of A Div On Another Page' 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=Change Content Of A Div On Another Page%20%2D%20https://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.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://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.html&text=Change Content Of A Div On Another Page' 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", ];
        var relatedConfig = {
            postUrl: "https://comparisonhidefinitioncamcorder.blogspot.com/2024/08/change-content-of-div-on-another-page.html",
            homePageUrl: "https://comparisonhidefinitioncamcorder.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/AVvXsEjHRzb1Kp6DImHjgvYFmf-2u6melRmeS38VmwUUa4heNDP0E956oQNVTqpVjNvwAQigot3MURtYtOLLe8pL6hszcqnHOrcpn2HOcKm07WPH4xsA6GHaTUTdh5tWsdov90cN77JbL87b9kU/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  "Change Content Of A Div On Another Page"
            </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/8314896191627810787?po=7039539165463551817&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/1839367302-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://comparisonhidefinitioncamcorder.blogspot.com/2022/06/how-to-detect-androids-version-number.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://comparisonhidefinitioncamcorder.blogspot.com/2022/06/how-to-detect-androids-version-number.html'>
How To Detect Android's Version Number In Firefox For Android?
</a>
</p>
<div class='popular-post-snippet'>
For a website we want to show a link in the play store if t…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/07/display-array-of-objects-in-dynamic.html'>
Display Array Of Objects In A Dynamic Table Javascript
</a>
</p>
<div class='popular-post-snippet'>
I want to display an array of objects in a dynamic table us…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/10/modal-appears-on-page-load.html'>
Modal Appears On Page Load
</a>
</p>
<div class='popular-post-snippet'>
Following is my code but the modal only appears when someon…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/03/d3-animating-bubble-chart-within-given.html'>
D3 Animating A Bubble Chart Within A Given Radius
</a>
</p>
<div class='popular-post-snippet'>
//bubble chart base. http://jsfiddle.net/NYEaX/1450/ I am t…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/01/passport-google-oauth-callback-not_6.html'>
Passport-Google-OAuth Callback Not Working When Used In Web Service
</a>
</p>
<div class='popular-post-snippet'>
I Have used Passport-Google-OAuth in Node.js web service pr…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/02/synchronized-multiple-api-calls.html'>
Synchronized Multiple API Calls
</a>
</p>
<div class='popular-post-snippet'>
I need to fetch the data from two different API endpoints, …
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/01/passport-google-oauth-callback-not.html'>
Passport-Google-OAuth Callback Not Working When Used In Web Service
</a>
</p>
<div class='popular-post-snippet'>
I Have used Passport-Google-OAuth in Node.js web service pr…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/03/javascript-regex-phone-validation.html'>
Javascript Regex Phone Validation
</a>
</p>
<div class='popular-post-snippet'>
Can anyone suggest a js function to validate a phone number…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/02/how-to-place-view-more-text-next-to.html'>
How To Place " ...view More " Text Next To The Truncated Sentence In A Container-Javscript
</a>
</p>
<div class='popular-post-snippet'>
I want to show a '...more' text for a long name des…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/06/how-to-limit-html-table-records-in-each.html'>
How To Limit The Html Table Records In Each Page
</a>
</p>
<div class='popular-post-snippet'>
I am populating a table in my jsp which has more than 20 re…
</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://comparisonhidefinitioncamcorder.blogspot.com/2024/12/'>
December 2024
<span class='post-count'>(1)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/11/'>
November 2024
<span class='post-count'>(38)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/10/'>
October 2024
<span class='post-count'>(54)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/09/'>
September 2024
<span class='post-count'>(18)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/08/'>
August 2024
<span class='post-count'>(210)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/07/'>
July 2024
<span class='post-count'>(191)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/06/'>
June 2024
<span class='post-count'>(388)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/05/'>
May 2024
<span class='post-count'>(673)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/04/'>
April 2024
<span class='post-count'>(428)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/03/'>
March 2024
<span class='post-count'>(767)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/02/'>
February 2024
<span class='post-count'>(917)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2024/01/'>
January 2024
<span class='post-count'>(771)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/12/'>
December 2023
<span class='post-count'>(793)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/11/'>
November 2023
<span class='post-count'>(313)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/10/'>
October 2023
<span class='post-count'>(520)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/09/'>
September 2023
<span class='post-count'>(286)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/08/'>
August 2023
<span class='post-count'>(325)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/07/'>
July 2023
<span class='post-count'>(280)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/06/'>
June 2023
<span class='post-count'>(373)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/05/'>
May 2023
<span class='post-count'>(206)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/04/'>
April 2023
<span class='post-count'>(138)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/03/'>
March 2023
<span class='post-count'>(144)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/02/'>
February 2023
<span class='post-count'>(184)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2023/01/'>
January 2023
<span class='post-count'>(259)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/12/'>
December 2022
<span class='post-count'>(129)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/11/'>
November 2022
<span class='post-count'>(233)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/10/'>
October 2022
<span class='post-count'>(154)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/09/'>
September 2022
<span class='post-count'>(165)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/08/'>
August 2022
<span class='post-count'>(502)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/07/'>
July 2022
<span class='post-count'>(287)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://comparisonhidefinitioncamcorder.blogspot.com/2022/06/'>
June 2022
<span class='post-count'>(294)</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://comparisonhidefinitioncamcorder.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://comparisonhidefinitioncamcorder.blogspot.com/'>JavaScript Info </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/8314896191627810787?po\x3d7039539165463551817\x26origin\x3dhttps://comparisonhidefinitioncamcorder.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>