Amp-script does not show the result for addEventListener "load"

Question

I want to copy all A to B. Using plain javascript, it works as it is. But it does not work when I use amp-script. It also doesn't show any error(s).

A

<div class="harga">111</div>
<div class="harga">222</div>
<div class="harga">333</div>

B

<div class="showHargaProd"></div>
<div class="showHargaProd"></div>
<div class="showHargaProd"></div>

Javascript

<script>
function getAndShow(){
    let sources = document.querySelectorAll('.harga');
    let dests = document.querySelectorAll('.showHargaProd');
    for (let i = 0; i < sources.length; i++){
        if (dests[i]){
            dests[i].innerHTML = sources[i].innerHTML;
            }
        } 
    }
document.addEventListener('DOMContentLoaded', getAndShow);
</script>

Here's all my codes

---

<amp-script layout='container' script='inline_amp'>
<div class='container_slide'>
   <div class='prod_price'><b class='showHargaProd'><!--111--></b></div>
   <div class='overlay'>
      <div class='text'><b>BELI</b></div>
   </div>
</div>
<div class='container_slide'>
   <div class='prod_price'><b class='showHargaProd'><!--222--></b></div>
   <div class='overlay'>
      <div class='text'><b>BELI</b></div>
   </div>
</div>
<div class='container_slide'>
   <div class='prod_price'><b class='showHargaProd'><!--333--></b></div>
   <div class='overlay'>
      <div class='text'><b>BELI</b></div>
   </div>
</div>
<p id="hrg1" class="harga">111</p>
<p id="hrg2" class="harga">222</p>
<p id="hrg3" class="harga">333</p>
</amp-script>

<script id="inline_amp" type="text/plain" target="amp-script">
    function getAndShow(){
        let sources = document.querySelectorAll('.harga');
        let dests = document.querySelectorAll('.showHargaProd');
        for (let i = 0; i < sources.length; i++){
            if (dests[i]){
                dests[i].innerHTML = sources[i].innerHTML;
                }
            } 
        }
    document.addEventListener('DOMContentLoaded', getAndShow);
</script>

Answer 1

Finally I use time (seconds) to trigger the DOM, as in:

HTML

<input id='nTrigger' name='nTrigger' type='hidden' value='0'/>
<input id='nCheck' name='nCheck' type='hidden' value=''/> 

JS

var dy = new Date();
var n = dy.getSeconds();
var trig = document.getElementById('nTrigger').value; 
document.getElementById('nCheck').value = n;
if (trig !== n) getAndShow();

Here's trig would never equal as n forever since seconds has no zero value and it will show the result I wish.

Stupid of me, I actually can use directly or call function getAndShow() when the layout is responsive with fixed height and width (size must be included).
What I want is how to load the class showHargaProd when user load the page, and It solved successfully.

Here's all the codes:

Note: layout='container' must be changed into layout='responsive' (see issue in related to layout system and gestures: https://github.com/ampproject/amphtml/issues/28361#issuecomment-628779575) and How to show popup on AMP page after setTimeout

Or, we can use flex-item Layout to make it properly in container

<amp-script layout='flex-item' script='inline_amp'>
<div class='container_slide'>
   <div class='prod_price'><b class='showHargaProd'><!--111--></b></div>
   <div class='overlay'>
      <div class='text'><b>BELI</b></div>
   </div>
</div>
<div class='container_slide'>
   <div class='prod_price'><b class='showHargaProd'><!--222--></b></div>
   <div class='overlay'>
      <div class='text'><b>BELI</b></div>
   </div>
</div>
<div class='container_slide'>
   <div class='prod_price'><b class='showHargaProd'><!--333--></b></div>
   <div class='overlay'>
      <div class='text'><b>BELI</b></div>
   </div>
</div>
<p id="hrg1" class="harga">111</p>
<p id="hrg2" class="harga">222</p>
<p id="hrg3" class="harga">333</p>

<input id='nTrigger' name='nTrigger' type='hidden' value='0'/>
<input id='nCheck' name='nCheck' type='hidden' value=''/>
</amp-script>

<script id="inline_amp" type="text/plain" target="amp-script">
    function getAndShow(){
        let sources = document.querySelectorAll('.harga');
        let dests = document.querySelectorAll('.showHargaProd');
        for (let i = 0; i < sources.length; i++){
            if (dests[i]){
                dests[i].innerHTML = sources[i].innerHTML;
                }
            } 
        }
    //document.addEventListener('DOMContentLoaded', getAndShow);
    var dy = new Date();
    var n = dy.getSeconds();
    var trig = document.getElementById('nTrigger').value; 
    document.getElementById('nCheck').value = n;
    if (trig !== n) getAndShow();   
</script>

More: (trig !== n) in fact, it would never equal and therefore, it triggers the function getAndShow() (that is almost the same as DOMContentLoaded).