为什么我收到 amp-script“找不到元素”错误？答案

【问题标题】：Why am I getting amp-script "could not find element" error?为什么我收到 amp-script“找不到元素”错误？
【发布时间】：2021-01-15 01:04:34
【问题描述】：

总结：当我尝试使用带有 script 属性的 amp-script 标签时，它声称看不到该脚本。

这是不工作的代码：

<amp-script layout="container" script="navToggleScript">
  <h3 class="nav-toggle icon"><a href="#navigation">Menu</a></h3>
</amp-script>
<script type="text/plain" target="amp-script" id="navToggleScript">
  document.querySelector(".nav-toggle.icon").textContent += 'Hello world!';
</script>

我尝试过 1) 将 name="navToggleScript" 添加到脚本标签和 2) 使脚本成为 amp-script 的子代而不是同级。无论我做什么，我仍然在 Chrome、Firefox 开发版和 Safari 中收到以下错误：[ amp-script ] amp-script[script="navToggleScript"].js could not find element with # navToggleScript . error.js:195:8。我究竟做错了什么？在我看来，我正在遵循documentation 中的说明。如果您对此有任何见解，我将不胜感激！

【问题讨论】：

脚本源使用绝对 URL 时会发生什么？
恐怕使用绝对 URL 没有帮助。
你声明了吗：<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
另请参阅此页面上的错误消息部分：amp.dev/documentation/components/amp-script/#state-manipulation
是的，自定义元素声明是在中使用 Jay Gray 引用的确切代码进行的。

标签： amp-html

【解决方案1】：

我做错了什么？

我认为这只是代码中的语法错误。您没有显示所有代码。

此外，amp-script 通常需要用户事件，请在此处阅读：https://amp.dev/documentation/components/amp-script/#user-gestures

这是一个工作示例（它在 stackoverflow 编辑器中不起作用）：

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <meta name="amp-script-src" content="sha384-uXoWENIGAIDx8-Kbo-aKOCJyr7HFCkg_jyDDPOKy1fHU1gexRU_AbvuDtCcKaFkD" />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }

      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }

        to {
          visibility: visible;
        }
      }

      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }

        to {
          visibility: visible;
        }
      }

      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }

        to {
          visibility: visible;
        }
      }

      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }

        to {
          visibility: visible;
        }
      }

      @keyframes -amp-start {
        from {
          visibility: hidden;
        }

        to {
          visibility: visible;
        }
      }
    </style>
    <noscript>
      <style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style>
    </noscript>
    <style amp-custom></style>
  </head>

  <body>
    <amp-state id="counter">
      <script type="application/json">
        0
      </script>
    </amp-state>

    <h1>My AMP script</h1>
    <amp-script layout="container" script="navToggleScript">
      <h3 class="nav-toggle icon"><a href="#navigation">Menu</a></h3>
      <button type="button">Button</button>
      <span class="counter" [text]="counter">0</span>
    </amp-script>
    <script type="text/plain" target="amp-script" id="navToggleScript">
      const icon = document.querySelector('.icon');
      const btn = document.querySelector('button');
      let myCounter = 0;
      btn.addEventListener('click', () => {
        icon.textContent += 'Hello world!';
        myCounter += 1;
        AMP.setState({counter: myCounter});
      });
    </script>
  </body>
</html>

【讨论】：