Is not defined javascript как исправить

Is not defined javascript как исправить

При программировании в JavaScript, jQuery или Angular JS кодеры очень часто натыкаются на «Uncaught ReferenceError is not defined». Как правило, это происходит когда $, будь она переменной или методом, была задействована, но не была корректно определена. В сегодняшней статье мы посмотрим с вами на различные причины появления ошибки и методы их решения.

Содержание

  • Uncaught ReferenceError is not defined — что это такое?
  • Что вызывает появление ошибки
  • 1. Библиотека jQuery была загружена некорректно
  • 2. jQuery повреждена
  • 3. jQuery не была загружена перед кодом JavaScript
  • 4. Файл JqueryLibrary имеет атрибуты async или defer
  • 5. Конфликт с другими библиотеками (prototype.js, MooTools или YUI)
  • 6. Проблемы с плагином jQuery в WordPress
  • Заключение

Uncaught ReferenceError is not defined — что это такое?

Uncaught ReferenceError is not defined

Как мы упомянули ранее, символ $ может использоваться для определения функции. Самая распространенная функция jQuery() называется $(document).ready(function()). Например

jQuery(“#name”).hide()

$(“#name”).hide()

Код выше применяется для скрытия элемента с помощью id=”name” через метод hide(). Во второй строчке вы можете видеть, что символ $ используется вместо метода jQuery(). 

Ошибка возникает тогда, когда вы пытаетесь получить доступ или использовать метод/переменную без символа $. При выполнении JavaScript в браузере перед пользователем вылетает ошибка, а все потому, что переменная не была определена (a variable being used is not defined). Вам необходимо задать переменную через var.

Вам также нужно определить функцию с помощью function() {}, чтобы избежать этой же ошибки.

Что вызывает появление ошибки

Давайте взглянем на другие причины появления рассматриваемой ошибки:

  • Библиотека jQuery была загружена некорректно либо повреждена.
  • Файл библиотеки jQuery был загружен после JavaScript.
  • У библиотеки JavaScript имеются атрибуты async или defer.
  • Конфликт с другими библиотеками, например, prototype.js, MooTools или YUI.
  • Проблемы с плагином jQuery в WordPress.

1. Библиотека jQuery была загружена некорректно

Uncaught ReferenceError is not defined возникает в том случае, когда к методу jQuery был сделан запрос, но jQuery не была загружена на то время. Предположим, что вы работали без сети, но попытались загрузить или сослаться на код jQuery из Интернета, доступа к которому у вас нет, а следовательно jQuery не будет работать. Вы увидите ошибку, если исходник вашего кода находится на Google CDN, но последняя недоступна.

Лучшее решение в данном случае — это проверить сетевое подключение перед выполнением скрипта. Как альтернатива, вы можете загрузить файлы jQuery на свою систему и включить их непосредственно в сам скрипт. Для этого воспользуйтесь следующей строчкой:

<script src=”/js/jquery.min.js”></script>

2. jQuery повреждена

Если с файлом библиотеки jQuery наблюдаются какие-то проблемы, то, разумеется, появление ошибки неудивительно. Зачастую такая ситуация складывается тогда, когда пользователь загружает библиотеки из непроверенного источника. Возможно, на последнем jQuery выложена в уже поврежденном виде. Не экспериментируйте, а скачайте ее с официального сайта.

3. jQuery не была загружена перед кодом JavaScript

jQuery не была загружена перед скриптом. Если не сделать все как положено, скрипт, написанный в JavaScript, не будет работать — гарантированы постоянные ошибки.

Пример:

<html><head>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#clickme’).click(function(){
alert(“Link clicked”);
});
});
</script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js” ></script>
</head>
<body>
<a href=”#” id=”clickme”>Click Here</a>
</body>
</html>

В этом коде jQuery загружен после скрипта. Так делать не нужно, а нужно вот так:

<html><head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js” ></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#clickme’).click(function(){
alert(“Link clicked”);
});
});
</script>
</head><body>
<a href=”#” id=”clickme”>Click Here</a>
</body></html>

4. Файл JqueryLibrary имеет атрибуты async или defer

async — это булевый (логический) атрибут. При взаимодействии с атрибутом происходит загрузка скрипта с его последующим выполнением. Если парсер HTML не заблокирован во этого процесса, рендеринг странички будет ускорен.

Без атрибута async файлы JavaScript будут выполняется последовательно. Файлы JC будут загружены и запущены, затем начнется выполнение другого кода. В это время парсер HTML будет заблокирован и рендеринг веб-странички будет замедлен.

В случае атрибута defer скрипт будет выполнен после парсинга страницы. Это также булевый атрибут, который задействуется параллельно со внешними скриптами. Вот вам небольшой пример:

<!doctype html>
<html><head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js” async defer></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#clickme’).click(function(){
alert(“Link clicked”);
});

});
</script>
</head>
<body>
<a href=”#” id=”clickme”>Click Here</a>
</body>
</html>

Именно вышеуказанные атрибуты обеспечивают асинхронную загрузку библиотеки jQuery. Чтобы избежать появления Uncaught ReferenceError is not defined, нужно избавиться от атрибутов async и defer в скрипте.

5. Конфликт с другими библиотеками (prototype.js, MooTools или YUI)

Символ $ используется как шорткат для jQuery. Поэтому, если вы используете другие библиотеки JavaScript, которые задействуют переменные $, вы можете наткнуться на рассматриваемую ошибку. Чтобы исправить проблему, вам нужно перевести jQuery в неконфликтный режим после ее загрузки. Небольшой пример:

<!– Putting jQuery into no-conflict mode. –>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( “div” ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( “main” );
}
</script>

В коде выше $ ссылается на свое оригинальное значение. Вы сможете использовать $j и название функции jQuery.

Но есть еще одно решение! Вы можете добавить этот код в шапку своей странички индекса:

<script>
$=jQuery;
</script>

Корректный код:

<!doctype html>
<html><head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#clickme’).click(function(){
alert(“Link clicked”);
});
});
</script>
</head>
<body>
<a href=”#” id=”clickme”>Click Here</a>
</body>
</html>

6. Проблемы с плагином jQuery в WordPress

Uncaught ReferenceError is not defined — настоящий кошмар для веб-разработчиков, использующих jQuery в WordPress. Появление ошибки способно полностью вывести из строя сайт. Главная причина — это конфликт между двумя или более плагинами jQuery. Например, есть старая версия плагина на jQuery, у которого $ — его имя, и какой-то сторонний плагин, который не использует $ в качестве шортката для jQuery и может иметь совершенно другое значение.

И вот из-за такой разницы и получается конфликт. Два значения $, отвечающих за совершенно разные вещи, не могут сосуществовать в одной программе. Вы гарантированно получите ошибку.

Решение: 

  • Убедитесь, что библиотека jQuery загружена перед JavaScript. Плюс постарайтесь использовать наиболее актуальную версию jQuery.
  • Библиотека jQuery уже доступна в WordPress, так что вам не нужно прикладывать ее с помощью CDN/URL. Вы можете использовать функцию wp_enqueue_script(), чтобы включить jQuery в ваш файл.

Заключение

Появления Uncaught ReferenceError is not defined можно избежать, если придерживаться всего, что мы указали выше. Еще одна причина появления ошибки — это неправильно указанный путь к jQuery. Возможно, в расположении файла где-то есть опечатка либо сам файл был перемещен/удален из своей оригинальной директории. Если же используете онлайн-версию библиотеки, убедитесь, что с вашим сетевым подключением все в порядке.

Источник

$ is not defined в jQuery: что это значит и что делать

Новая рубрика — «Типичные ошибки». Будем разбираться, что означают разные ошибки в программах и как с ними быть.

Новая рубрика — «Типичные ошибки». Будем разбираться, что означают разные ошибки в программах и как с ними быть.

Где можно встретить $ is not defined и что это значит

Скорее всего, эту ошибку вы встретите в сообщениях консоли браузера, когда будете подключать к своему сайту какую-нибудь JavaScript-библиотеку, которая использует jQuery. Например, это может быть листалка фотографий или форма обратной связи.

$ is not defined означает, что на момент, когда ваша библиотека пыталась сделать что-то с помощью jQuery, сама jQuery либо не была загружена, либо загрузилась некорректно.

Что делать с ошибкой $ is not defined

Сделайте так, чтобы сначала у вас корректно загружалась jQuery, и только потом — остальной код, который использует эту библиотеку. Обычно для этого достаточно поставить вызов jQuery раньше всех других вызовов.

Было:
<script src="ВАШ СКРИПТ"></script>
<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>

Стало:
<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
<script src="ВАШ СКРИПТ"></script>

Если перемещение вызова jQuery не помогло

Проверьте, откуда вы берёте библиотеку jQuery. Может быть, вы берёте её с удалённого сайта, до которого ваш браузер не может дозвониться (Роскомнадзор постарался или просто сайт лежит). Тогда скачайте jQuery на компьютер и вызовите локально:

<script src="script/jquery.min.js"></script> <!--при этом не забудьте скачать и положить сюда библиотеку jQuery-->

<script src="ВАШ СКРИПТ"></script>

Простой способ убедиться, что jQuery загружается нормально, — скопировать её адрес из кода и вставить в адресную строку браузера. Если вам выведется программный код, значит, jQuery вам доступна и загружается. Если что-то пойдёт не так — вы увидите это на экране.

Например, попробуйте перейти по этой ссылке: https://yastatic.net/jquery/3.3.1/jquery.min.js — если она у вас открывается и вы видите месиво из кода, значит, jQuery для вас открылась.

Знак $ в JavaScript — это название сущности, через которую мы делаем всевозможные запросы с помощью jQuery.

jQuery — это дополнительная библиотека, которая упрощает работу с элементами на веб-странице. Например, если нам нужно с помощью JavaScript на лету поменять какую-то надпись на странице, то без jQuery нам бы пришлось сделать так:

document.getElementById('someElement').innerHTML='Some New Text';

А через jQuery всё то же самое делается так:

$("#someElement").html("Some New Text");

Знак доллара при отладке JS (то есть в консоли) — признак того, что в коде используется jQuery, это её фирменный знак.

jQuery настолько распространена, что на её основе уже делают другие библиотеки: всевозможные галереи, переключалки, интерфейсные штуки, формы и т. д. Чтобы такие библиотеки работали, сначала в браузере должна быть загружена сама jQuery, а уже потом — нужная вам библиотека.

Технически с точки зрения браузера $ — это просто объект в языке JavaScript. У него есть методы, которые должны быть прописаны, прежде чем браузер сможет их исполнить. И если на момент вызова этих методов они не были нигде прописаны, браузер справедливо возмутится. А они не будут прописаны только в одном случае: при загрузке jQuery что-то пошло не так.

Возможные причины незагрузки jQuery:

  • Её просто забыли добавить в код.
  • Она загружается с удалённого сайта, который сейчас для вас недоступен. Отключён интернет, сайт лежит, заблокирован или в его адресе опечатка.
  • При загрузке что-то пошло не так, и вместо jQuery прилетело что-то другое.
  • Уже после загрузки jQuery какой-то другой скрипт переопределил объект $ (и всё сломал).
  • Браузер запретил загрузку скрипта с другого сайта.
  • Она загружается после того, как её вызывают (а не до).
  • Загружается какая-то испорченная версия jQuery (маловероятно).
Источник

Sometimes, you may come across JavaScript function is not defined error that looks like the following:

Uncaught ReferenceError: doAction is not defined

The ReferenceError as in the case above is caused when you call something that’s not defined in JavaScript. Let me show you several things you can do to fix the error.

Make sure the function is defined inside your script

One of the small mistakes that could cause the error is that you haven’t defined the function properly. You need to define the function using either the function keyword:

function doAction() {
  // your function code here
}

Or using the arrow function syntax as follows:

const doAction = () => {
  // your function code here
};

Please keep in mind that functions defined through function expressions must be defined before the call. Function expressions are functions that you defined through a variable keyword as follows:

var fnAction = function () {};
// or
let fnAction = () => {};

From the example code above, the variable fnAction will be hoisted, but the function declaration is not, so it will be undefined as shown below:

fnAction(); // fnAction is not defined
let fnAction = () => {
  console.log("Executing action");
};

See also: JavaScript hoisting behavior

That’s why it’s always better to define the function before calling it.

When you have defined the function, try calling it immediately below the declaration to see if it works:

function doAction() {
  // your function code here
}

doAction(); // test the function call

If it’s running without any error, then you may have several lines of code after the declaration that causes the script to malfunction.

Make sure the entire script has no error

If you’re putting the function into a script and calling it from an HTML tag, you need to make sure that the entire script has no error or the function won’t be loaded.

For example, notice how there is an extra ) right next to getElementById call:

<!DOCTYPE html>
<html>
  <head>
    <title>Function not defined</title>
  </head>
  <body>
    <button id="action" onclick="fnAction()">Click me</button>
    <script type="text/javascript">
      document.getElementById("action")); // extra ')' here
      function fnAction(){
        console.log("Executing action");
      }
    </script>
  </body>
</html>

Although there’s no error on the fnAction() code, an error in any part of the script will cause the browser to ignore the rest of that script. You need to fix the error first so the rest of the code can be executed by the browser.

One way to see if you have any error is to run the HTML page and check on the console as follows:

You may find the ReferenceError fixed itself as you fix JavaScript errors from your scripts.

Make sure the script is loaded before the call.

Finally, the function is not defined error can also be caused by calling the function before the script is loaded to the browser. Suppose you have a JavaScript file separated from your HTML file as follows:

// script.js
function fnAction() {
  console.log("executing action");
}

Then you load the script into your HTML file, but you call the fnAction function before you load the script as follows:

<body>
  <h1>Load script demo</h1>
  <script type="text/javascript">
    fnAction();
    // Uncaught ReferenceError: fnAction is not defined
  </script>
  <script src="script.js"></script>
</body>

The same also happens when you call it on the <head> tag:

<head>
  <title>Function not defined</title>
  <script type="text/javascript">
    fnAction();
  </script>
  <script src="script.js"></script>
</head>

To fix this, you need to call the function below the <script src="script.js"></script> call:

<head>
  <title>Function not defined</title>
  <script src="script.js"></script>
  <script type="text/javascript">
    fnAction();
  </script>
</head>

Those are the three ways you can try to fix function is not defined error in JavaScript.

Источник

You’re trying to call your JavaScript function. But, whenever you do, the result is a ReferenceError that goes like this:

// Call the function
myFunction();

// ReferenceError
Uncaught ReferenceError: myFunction is not defined

What went wrong? And how can you fix it?

Fear not; it happens to the best of us! The good news is that this ReferenceError is usually caused by one of the oversights that you and I will go through below. With a little investigation and debugging, you should be able to find the root cause in no time.

The Function Isn’t Defined at All

The most obvious—and, ironically, the most common—cause for the function not defined error is that, no prizes for guessing, the function isn’t defined in your code at all.

To save yourself hours of chasing a red herring, this is also the first probable cause you should rule out when debugging your code.

For those of you just getting started with JavaScript, here is a code snippet to illustrate what I mean:

// Define (or declare) the function
function saySomething(message) {
  console.log(message);
};

// Call the function
saySomething("The answer to life, the universe, and everything, is 42.");

Lines 2 through 4 define (or declare) our function. They consist of:

  • The function keyword
  • The name of the function, in our case saySomething
  • A list of the parameters it consumes (message)
  • The function’s statement between curly brackets {console.log(message)}

Only after we’ve defined our function properly can we call it with saySomething(), as shown on line 7.

The question is, what could be causing this?

Sanity-check #1:

If your function’s definition is supposed to be included within a <script> element in the HTML document, make sure that the script within the element (or the version of it that’s currently loaded in your app) actually contains it.

You might be testing against an older version of the document that doesn’t contain the function definition you need. Or you may be coming across caching issues, whether server- or client-side.

Sanity-check #2:

If your function’s definition is supposed to be included in an externally-hosted script, for example <script src="cdn.site.com/script.js"></script>, check if the URL of that script is correct, if the script is indeed there, and if the version of the script you need is what’s being returned by the CDN or server.

Once again, version control and/or caching are usually the culprits here. Identifying them early on can save you minutes, and sometimes hours, of dead-end debugging.

You’re Calling the Function Before It’s Defined

If the code that calls your JavaScript function precedes that function’s definition in your HTML document, you will come across the function is not defined error.

This is very, very important to check and rule out before you proceed to investigating other probable causes.

To build on the example above, suppose we’re developing a super-simple frontend for a web app using HTML5 and JavaScript.

It has two <script> elements: one that defines and function and one that calls it. However, we ordered them wrongly within our HTML markup; the call for the function precedes the definition of that function in our document:

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>What's the answer to life?</title>
  <!-- Call function -->
  <script>
    populateAnswer("article.question-01 span.answer","The answer to life, the universe, and everything, is 42.");
  </script>
</head>

<body>
<article class="question-01">
<h1 class="question">Question: What's the answer to life?</h1>
<p>Answer: <span class="answer"></span></p>
</article>

<!-- Define function -->
<script>
  function populateAnswer(placeholder,answer) {
    document.querySelector(placeholder).innerHTML = answer;
  };
</script>
</body>

</html>

What’s happening here is that the browser, as it parses the HTML markup and interprets the JavaScript code, will try to call a function whose definition it hasn’t come across yet.

For this web app of ours to work, and to populate our <span class="answer"></span> element with the answer parameter, we need the function’s definition to come before the call:

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>What's the answer to life?</title>
  <!-- Define function -->
  <script>
    function populateAnswer(placeholder,answer { document.querySelector(placeholder).innerHTML = answer; };
  </script>
  <!-- Call function -->
  <script>
    populateAnswer("article.question-01 span.answer","The answer to life, the universe, and everything, is 42.");
  </script>
</head>

<body>
<article class="question-01">
<h1 class="question">Question: What's the answer to life?</h1>
<p>Answer: <span class="answer"></span></p>
</article>
</body>

</html>

Sounds simple enough, doesn’t it?

Add a content management system like Drupal or WordPress to the mix and throw in a tag manager like Google Tag Manager or Adobe Launch, and it isn’t hard to see just how many things can go wrong by scripts being injected in the wrong sequence.

Sanity-check #1:

Where’s the <script> element that has your function’s definition? Pay special attention to scripts loaded in the <body>, whether at the start, in the middle, and especially down in the footer for performance reasons.

Are you trying to call the function before the definition? Remember that browsers have no memory for this, and will throw back a ReferenceError when it happens.

Sanity-check #2:

There’s a great deal of Google PageSpeed optimization tools out there nowadays, from Ezoic’s Leap for publishers to NitroPack for pretty much everyone else to all sorts of plugins, free and paid, for WordPress.

Almost all of these tools let you delay the execution of scripts until the DOM has finished loading. Although this improves your Google PageSpeed score, but can create issues for scripts that contain definitions of functions you’re calling within the DOM to write HTML elements directly into it.

Sanity-check #3:

Are you using a VPN? It’s not uncommon for CDNs and hosting providers to block the IPs of some of the most popular VPN apps out there, as they’re frequently used for attacks, fraud, and spam.

Disable your VPN and see if the problem persists. The JavaScript with the function’s definition might all of a sudden start loading. 🙂

Mistyped Name or Errors in Function

Burning the midnight oil to get the job done?

You’re more likely to make mistakes like mistyping your function’s name:

// Function definition
function myFunction(sayThis){ console.log(sayThis) };

// Mistyped name with lowercase letter
function myfunction("What's my name?");

// Mistyped name with typo
function myFuntion("What's my name?");

// Right name, no ReferenceError
function myFunction("That's my name!");

Sanity-check #1:

Check the name of your function. Is it spelled correctly? Now check if you’re calling that function with the right name, and whether you misspelled it in any way, including lowercase/uppercase characters.

Or omit parentheses in parameters, brackets in arrays, braces at the start and end of statements, and semi-colons wherever necessary:

// Forgot opening or closing parenthesis for the function's parameters
function myFunction(sayThis{console.log(sayThis) };

// Forgot opening or closing braces for the function's statement
function myFunction(sayThis){console.log(sayThis) ;

// Added extra brace at the start or end of the function's statement
function myFunction(sayThis){console.log(sayThis) }};

You can quickly uncover these oversights by checking for errors in your browser’s console. If you encounter an error message that says “myFunction is not a function” or that “this was expected instead of that,” you know you need to look closely at the code to see where you made a mistake.

Sanity-check #2:

Evaluate the browser’s console for errors. If you come across any related to your function, debug the function and fix whatever mistake(s) you made.

In Conclusion

Thank you for reading this far and I hope this helped.

Nine times out of ten, the biggest issues are caused by the smallest mistakes. (Which, since we’re human, we’re prone to making, especially when under time pressure and emotional stress.)

Whenever you come across a ReferenceError for your JavaScript function, check if it’s declared and, if the answer is “yes,” whether it’s declared and called in the right sequence. When you’ve ruled these out, chances are high that a mistyped name or error in the function are the root cause; investigate accordingly.

Image courtesy of alphaspirit /Depositphotos

Источник

The Javascript ReferenceError occurs when referencing a variable that does not exist or has not yet been initialized in the current scope. Reference errors in Javascript are of a few different types, with variations of each, that may get triggered in code. Some of these are discussed below.

What Causes Javascript ReferenceError

The Javascript ReferenceError is thrown when an attempt is made to reference a non-existing or out of scope variable. There are a few types of reference errors in Javascript with different variations of each. Some of these are:

  • Undefined variables – Not defining a variable before referencing it is one of the most common triggers for reference errors in Javascript.
  • Out of scope variables – Variables defined inside a function’s scope cannot be accessed outside of it. If an attempt is made to reference an out of scope variable, a ReferenceError is thrown.
  • Strict mode – Using strict mode in Javascript can throw a ReferenceError if a variable is not defined using the var, let or const keywords. Here’s an example of such a declaration: foo = true;
  • Referencing the variable foo in code would result in a ReferenceError being thrown if using strict mode. The error would not occur if not using strict mode.
  • Variable redeclarations – Redeclaring variables using the wrong keywords can also throw a ReferenceError. For example, initially declaring a variable using let, and subsequently redeclaring using let again throws a ReferenceError.

ReferenceError Example

Here’s an example of a Javascript ReferenceError thrown when referencing a variable that is out of scope:

function text() {
    var str = "Hello World";
    return str;
}

console.log(str);

In the above example, the variable str is defined inside the text() function and referenced outside the function. Since str is defined only in the scope of the function, referencing it from outside the function causes a ReferenceError:

Uncaught ReferenceError: str is not defined

How to Fix ReferenceError

Reference errors in Javascript are mainly thrown when an attempt is made to reference a variable that does not exist or is out of scope. Therefore, in the majority of cases, a ReferenceError can be fixed by making sure that the referenced variable is defined correctly and is being called in the correct scope.

The earlier example can be updated to fix the ReferenceError by defining the str variable in the global scope:

var str = "Hello World";

function text() {
return str;
}

console.log(text());

Since the text() function is defined in the global scope, it can access variables defined in the global scope. Therefore, running the above code produces the correct output as expected:

Hello World

Track, Analyze and Manage Errors With Rollbar

Managing errors and exceptions in your code is challenging. It can make deploying production code an unnerving experience. Being able to track, analyze, and manage errors in real-time can help you to proceed with more confidence. Rollbar automates error monitoring and triaging, making fixing JavaScript errors easier than ever. Sign Up Today!

Источник

Добавить комментарий