发生错误调用javascript函数

Question

我是html和javascript的新手，无法通过html锚元素调用javascript函数。我尝试了其他可用的解决方案，但没有一个对我有帮助。

我的javascript代码在同一个html文件中，有人可以帮助我在哪里出错吗？

这是我的javascript和html文件代码：

  <div id="myModal" class="modal fade modal-position" role="dialog">
    <!--<div class="modal-dialog">-->
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close" data-dismiss="modal">×</span>
        <h4 onclick="start()">Start over</h4>
      </div>
      <div class="modal-body w3-center">

        <a id="masterdata" onclick="masterdata2()">Master Data</a>              
      </div>
    </div>
  </div>

Javascript：

<script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function () {
      modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
      modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>


  <script>
    function start() {
      document.getElementById("masterdata").style.display = "flex";
      document.getElementById("hierarchy").style.display = "flex";
      document.getElementById("emeslink").style.display = "flex";
      document.getElementById("a").style.display = "none";
      document.getElementById("b").style.display = "none";
      document.getElementById("c").style.display = "none";
      document.getElementById("d").style.display = "none";
      document.getElementById("e").style.display = "none";

    }
    function masterdata2() {
      document.getElementById("masterdata").style.display = "none";
      document.getElementById("hierarchy").style.display = "none";
      document.getElementById("emeslink").style.display = "none";
      document.getElementById("a").style.display = "flex";
      document.getElementById("b").style.display = "flex";
      document.getElementById("c").style.display = "flex";
      document.getElementById("d").style.display = "flex";
      document.getElementById("e").style.display = "flex";
    }
</script>

Answer 1

最后解决了。原来，我在html文件的script标签内创建了javascript函数。将它们移到我组件中的打字稿文件后，问题已解决。