Question

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

这是不起作用的代码：

/** 
saves the top snake of the parameter no. species if 
it has a better score than any of the legends
**/

void saveTopSnake(int speciesNo) {  
Table t;
t = new Table();

//load the data about which legend spaces have already been assigned a snake
loadTable("Downloads/snakesStored.xlsx");

int snakeNo;
snakeNo = new Integer(-1);
TableRow tr = t.getRow(0);
  for (int i = 0; i< t.getColumnCount(); i++) {
    if (tr.getInt(i) == 0) { 
      snakeNo = i; break; 
  }
}

我尝试了1）将name =“ navToggleScript”添加到脚本标签，以及2）使脚本成为amp-script的子级，而不是同级的子级。无论我做什么，在Chrome，Firefox Dev Edition和Safari中仍然会出现以下错误：<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>。我究竟做错了什么？在我看来，我正在按照这封信的documentation中的说明进行操作。我将不胜感激！

Answer 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>

为什么会出现amp-script“找不到元素”错误？

1 个答案: