Amp 脚本不显示 addEventListener "load" 的结果

Question

我想将所有 A 复制到 B。使用普通 javascript，它按原样工作。但是当我使用 amp-script 时它不起作用。它也没有显示任何错误。

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>

这是我所有的代码

<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

最后我使用时间（秒）来触发 DOM，如：

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();

这里的 trig 永远不会等于和 n 一样，因为 seconds 没有零值，它将显示我想要的结果。

愚蠢的我，当布局为responsive 固定高度和宽度时，我实际上可以直接使用或调用函数getAndShow()（size 必须包含）。
我想要的是如何在用户加载页面classshowHargaProd时加载，并成功解决。

所有代码如下：

注意：layout='container'必须改成layout='responsive'（参见布局系统和手势相关问题：https://github.com/ampproject/amphtml/issues/28361#issuecomment-628779575) and How to show popup on AMP page after setTimeout

或者，我们可以使用flex-item 布局使其在容器中正常

<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) 实际上，它永远不会等于因此，它会触发函数 getAndShow()（这与 DOMContentLoaded 几乎相同）。

Amp 脚本不显示 addEventListener "load" 的结果

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

javascript

amp-html

ampscript