从html外部调用JS函数

时间:2020-08-19 01:51:43

标签: javascript html

我是js的新手。我环顾了其他几篇文章,看来这应该可以解决问题。

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="./web3.min.js"></script>
    <script type="text/javascript" src="./request_balance_script.js"></script>
    <script type="text/javascript" src="./get_hash.js"></script>
    <script language="javascript">
        getHash()
    </script>
<body>
    <h1>Transaction Hash Fetch.</h1>
    <p>Here is the hash for "Transfer(address,address,uint256)"</p>
    <div id="output"></div>
</body>
</html>

./get_hash.js的外观如下。

function getHash() {
    console.log("Preparing to hash transaction.");
    var hash = web3.utils.keccak256("Transfer(address,address,uint256)");
    console.log("Hashed transaction ="+hash);
    document.getElementById("output").innerHTML = hash;
}

为什么getHash()未定义?

1 个答案:

答案 0 :(得分:2)

根据评论:

  1. getHash的内容加载之前,将调用您的get_hash.js函数
  2. 您还需要在加载dom元素之前访问dom元素

在开始处理之前,请等待脚本和dom加载完毕。查看DOMContentLoaded事件。

要概述的摘录示例:

<!DOCTYPE html>
<html>
<script language="javascript">
  function getHash() {
    console.log("Preparing to hash transaction.");
    document.getElementById("output").innerHTML = 'mocked data';
  }
</script>

<body>
  <h1>Transaction Hash Fetch.</h1>
  <p>Here is the hash for "Transfer(address,address,uint256)"</p>
  <div id="output"></div>
  <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      getHash();
    });
  </script>
</body>

</html>