Невозможно вызвать функцию 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 если у вас есть файл 'external js', вставьте его внизу, но если у вас есть встроенный' js code', вам нужно поместить их в соответствии с вашей логикой. Но всегда пытайтесь отделить 'js code' от' html' –

@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

В моем блоке сценария, там является EXTRA SEMICOLON в одном из заявлений от одной из функций:

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

Я сог это решение здесь, надеюсь, это будет полезно кому-то в будущем.

источник

2016-12-01 20:10:56 user3437460

Невозможно вызвать функцию javascript из другого блока сценария

ответ

Смежные вопросы