Question

我试图在每次加载页面时停止加载JS函数，我希望它仅在单击按钮时才起作用。我尝试使用onclick和.addEventListener.on使用onclick时，在单击加载数据按钮之前显示输出数据，而在使用.addEventListener时即使单击按钮也没有数据加载。任何帮助将不胜感激，谢谢！

<html>
<head>
    <title> Monitoring</title>
</head>
<body>
<div id="output"></div>
<script src="./lib/mam.web.min.js"></script>
<script>

    const TRYTE_ALPHABET = 'SFRRJJVGGYJI';

    const asciiToTrytes = (input) => {
      let trytes = '';
      for (let i = 0; i < input.length; i++) {
        var dec = input[i].charCodeAt(0);
        trytes += TRYTE_ALPHABET[dec % 27];
        trytes += TRYTE_ALPHABET[(dec - dec % 27) / 27];
      }
      return trytes;
    };

    const trytesToAscii = (trytes) => {
      let ascii = '';
      for (let i = 0; i < trytes.length; i += 2) {
        ascii += String.fromCharCode(TRYTE_ALPHABET.indexOf(trytes[i]) + TRYTE_ALPHABET.indexOf(trytes[i + 1]) * 27);
      }
      return ascii;
    };
    const outputHtml = document.querySelector("#output");
          const mode = 'public'
      const provider = ''

      const mamExplorerLink = ``

      // Initialise MAM State
      let mamState = Mam.init(provider)

      // Publish to tangle
      const publish = async packet => {
//      alert("coming into publish");
        // Create MAM Payload - STRING OF TRYTES
        const trytes = asciiToTrytes(JSON.stringify(packet))
        const message = Mam.create(mamState, trytes)
//      alert("p2");
        // Save new mamState
        mamState = message.state
//      alert("p3");
        // Attach the payload
        await Mam.attach(message.payload, message.address, 3, 9)
//        alert("p4");
        outputHtml.innerHTML += `Published: ${packet}<br/>`;
//      alert(message.root);
        return message.root
      }

      const publishAll = async () => {
//    alert("Yes 1.3");
        const root = await publish('ALICE')

        return root
      }

      // Callback used to pass data out of the fetch
      const logData = data => outputHtml.innerHTML += `Fetched and parsed ${JSON.parse(trytesToAscii(data))}<br/>`;
 (async function GKpublishAll(){
     const root = await publishAll();
    //  alert(root);
     outputHtml.innerHTML += `${root}`;

    })();

  </script>
  <form>
  Publish message :
  <input type="submit" onclick="GKpublishAll()">
</form>
</body>

</html>

Answer 1

这段代码定义并立即调用GKpublishAll函数，如果您不希望在页面加载时调用它，则应从此更改代码：

 (async function GKpublishAll(){
 const root = await publishAll();
//  alert(root);
 outputHtml.innerHTML += `${root}`;

})();

对此：

 async function GKpublishAll(){
 const root = await publishAll();
//  alert(root);
 outputHtml.innerHTML += `${root}`;

}

然后，要在单击按钮时使用它，请将其附加到按钮的onclick处理程序上，如下所示：

<button onclick="GKpublishAll()">Click me</button>

Answer 2

您发布的代码中有一些不清楚/不确定/隐藏的部分。也许您应该从它的简化版本开始，该版本显示定义和调用。

例如，您定义了一个名为logData的函数，但从未调用/使用过。应该在哪里使用它，我在这里没有看到任何fetch

@Ermir答案是以下问题的正确答案：“为什么即使不单击按钮，这段代码也可以工作？”

Answer 3

在<button>标记上，您可能想添加一个属性而不是添加一个JavaScript事件：mouseclick="function()"。如果出现错误，请尝试click="function()"。或尝试onclick="function()"。

希望有帮助！

停止在初始页面加载时加载js函数

3 个答案: