Question

我有2个脚本块（写在同一个文件中），但是我无法调用另一个脚本块中写的函数。

<!DOCTYPE html>
<html>
    <head>
        <title>Just A Test</title>
    </head>

    <body>
        <div class="app">
            <h1>Just A Test</h1>
        </div>

        <div data‐role="main" class="ui‐content">
            <form name="testForm" id="testForm">
                <div class="ui‐field‐contain">
                    First greeting:
                    <script type="text/javascript">
                        greetings1();                //ERROR AT THIS LINE               
                    </script>
                    <p></p>

                </div>
            </form>
        </div>

        <script type="text/javascript">

            function greetings1(){
                alert("Hello ONE");
            }

        </script>
    </body>
</html>

我得到的错误是：

错误：'greetings1'未定义

我的问题是：是什么导致浏览器无法看到声明的函数？我花了几个小时尝试过将脚本块移动到head的方法，但问题仍然存在。

Answer 1

网页从左到右，从上到下进行解析。您在调用之后声明了您的功能。 您有两种解决方案：

移动函数声明，以便在调用它之前处理它。您可以通过选取整个script块并将其移至head来执行此操作。
如果我们使用DOM注入替换对您的函数的“内联”调用，我们可以将脚本放在页面的底部，但我们需要使用事件处理程序来使代码现代化。 这是首选方法，因为它可以消除JavaScript与HTML的交织。

<!DOCTYPE html>
<html>
    <head>
        <title>Just A Test</title>
    </head>

    <body>
        <div class="app">
            <h1>Just A Test</h1>
        </div>

        <div data‐role="main" class="ui‐content">
            <form name="testForm" id="testForm">
                <div class="ui‐field‐contain">
                    <!-- NOTE THE ADDITION OF THE  SPAN
                         AND THE REMOVAL OF THE JAVASCRIPT -->
                    First greeting: <span id="greeting"></span>

                </div>
            </form>
        </div>

        <script type="text/javascript">
          // Now, all your JavaScript will be separated away from your HTML
          // and won't run until after all the HTML elements have been 
          // parsed and are in memory

          // By the time the browser parses down this far, the SPAN will have
          // been read into memory:

          // Get a reference to the span:
          var span = document.getElementById("greeting");
          
          // Just for fun, let's ask the user what their name is:
          var name = prompt("What is your name?");
          
          // Inject that answer into the SPAN
          span.textContent = name;
          
          // Display an alert with the name:
          alert("Hello " + name);

        </script>
    </body>
</html>

Answer 2

首先尝试声明该函数然后调用它。浏览器逐行读取并执行代码，因此当它到达greetings1();时，它找不到具有该名称的任何函数。但是当你首先声明你的函数时，它会找到并执行它。

<!DOCTYPE html>
    <html>
        <head>
            <title>Just A Test</title>
        </head>

<body>
  
    <script type="text/javascript">

        function greetings1(){
            alert("Hello ONE");
        }

    </script>
  
    <div class="app">
        <h1>Just A Test</h1>
    </div>

    <div data‐role="main" class="ui‐content">
        <form name="testForm" id="testForm">
            <div class="ui‐field‐contain">
                First greeting:
                <script type="text/javascript">
                    greetings1();                //ERROR AT THIS LINE               
                </script>
                <p></p>

            </div>
        </form>
    </div>

    
</body>
</html>

Answer 3

首先你应该使用外部JavaScript。但无论如何，错误是您必须在html

中调用它之前声明该函数

<!DOCTYPE html>
<html>
    <head>
        <title>Just A Test</title>
    </head>

<body>


<script type="text/javascript">

    function greetings1(){
        alert("Hello ONE");
    }

</script>

<div class="app">
    <h1>Just A Test</h1>
</div>

<div data‐role="main" class="ui‐content">
    <form name="testForm" id="testForm">
        <div class="ui‐field‐contain">
            First greeting:
            <script type="text/javascript">
                greetings1();                //ERROR AT THIS LINE               
            </script>
            <p></p>

        </div>
    </form>


 </div>


</body>
</html>

Answer 4

花了几个小时后，我发现了另一个可能导致

的问题

函数未定义错误

在我的脚本块中，其中一个函数的一个语句中有一个 EXTRA SEMICOLON ：

.products li.product { background-color: transparent; }
.products-3 > li:nth-child(3n+1) { clear: both;    content: " ";    display: block;}
 .products li { border-color: #ebeaea;}
 .products-3 > li { float: left;    margin-bottom: 11px;    margin-right: 1%;    width: 32.6%;}
.products > li {  -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    border-color: #efefef;    border-image: none;    border-style: solid;    border-width: 1px 1px 2px;}
.product {    position: relative;}

我在这里写这个解决方案，希望将来对某人有用。

无法从另一个脚本块调用javascript函数

4 个答案: