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，因为秒没有零值，它将显示我希望的结果。

我真傻，当布局是固定高度和宽度的responsive时，我实际上可以直接使用或调用函数getAndShow()(必须包括size(。
我想要的是当用户加载页面时如何加载类showHargaProd，并且它成功地解决了。

以下是所有代码：

注意：必须将layout='container'更改为layout='responsive'(请参阅中与布局系统和手势相关的问题：https://github.com/ampproject/amphtml/issues/28361#issuecomment-628779755(以及如何在设置超时后在AMP页面上显示弹出窗口

或者，我们可以使用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>

更多：(trig !== n)事实上，它永远不会等于，因此，它触发了函数getAndShow()(与DOMContentLoaded几乎相同(。