無法從另一個腳本塊調用javascript函數

我有2個腳本塊（寫在同一個文件中），但是我無法調用寫在另一個腳本塊中的函數。無法從另一個腳本塊調用javascript函數

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

我得到的錯誤是：

Error: 'greetings1' is undefined

我的問題是：是什麼原因造成不能夠看到聲明的函數瀏覽器？我花了幾個小時，嘗試了將腳本塊移到head的方法，但問題仍然存在。

來源

2016-12-01 user3437460

羽絨選民，謹慎解釋？這在之前沒有被問到過。我知道這是一個基本問題，但我花了很多時間在這方面進行研究，我對此很陌生，所以請。 – user3437460

我也不明白。這是一個很好的清晰的問題，並且有明確的答案。 +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>

來源

2016-12-01 19:39:53

謝謝，感謝您對此的回覆。 +1 – user3437460

@ user3437460查看我更新的答案，解釋爲什麼您看到腳本應位於頁面底部以及如何正確執行此操作。 –

嘗試先聲明該函數然後調用它。瀏覽器逐行讀取並執行您的代碼，因此當它到達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>

來源

2016-12-01 19:38:37

感謝您的回覆，最初我把它放在最上面。然而，我從SO讀了一些帖子，有人提到將腳本塊放在'body'結尾之前是一個好習慣。所以作爲一種習慣，我應該把它放在頂部嗎？ – user3437460

@ user3437460如果你有'外部js'文件，放在底部，但如果你有行內'JS code'你需要根據你的邏輯把它們。但是總是試圖從'html'中分離'js代碼' –

@SurenSrapyan *「如果你有外部的js文件，放在底部，」*即使腳本是外部文件，它仍然會在這個例子中失敗，因爲該函數仍然會在腳本之前被調用。 –

，首先你應該使用外部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>

來源

2016-12-01 19:40:15 NotanNimda

爲什麼「應該」使用外部JavaScript？如果該功能僅適用於當前頁面，該怎麼辦？ –

您的答案不包含任何'body'標籤。 –

它運行速度更快，代碼看起來更清潔，用戶只有一次的腳本文件 – NotanNimda

-1

花了幾個小時之後才宣佈的功能，我發現這可能導致

function is undefined error

在我的腳本塊的其他的問題，是多餘的分號的語句之一，從功能之一：

<script type="text/javascript"> 

    function greetings(){ 
     alert("HELLOOOOOOO!"); 
    } 

    function calcDebtToIncomeRatio(){ 
     //some other codes not shown 
     var income = parseFloat(localStorage.getItem("income");); //<--- EXTRA SEMICOLON 
     return (repayment/income); 
    } 
</script>

我WR在這裏提出這個解決方案，希望對未來的某個人有用。

來源

2016-12-01 20:10:56 user3437460

無法從另一個腳本塊調用javascript函數

回答

相關問題