Как вызвать скрипт js из html

Как вызвать функцию из внешнего JS файла

Может, браузер закэшировал старый вариант файла js/JS_req.js ? И лучше заключать в кавычки имя файла и прочие значения HTML атрибутов. Не обязательно, но лучше.

Считается неудачной практикой писать обработчики прямо в теле HTML, лучше навешивать слушатели событий:

  // .

В таком варианте скрипт нужно подключать в конце документа, перед закрывающим .

Отслеживать
ответ дан 28 авг 2016 в 16:18
30.7k 4 4 золотых знака 47 47 серебряных знаков 86 86 бронзовых знаков

как я понял, скрипт нужно все равно пихать в html файл, но у меня есть и тяжелые скрипты, которые не желательно нагружать на клиента

28 авг 2016 в 17:23

в конце (а не в начале) документа подключайте внешний скрипт – как и раньше, только в конец перенесите. Т.к. сначала нужно, чтобы точно была в документе кнопка с нужным id, а только потом навешивать на неё слушатель событий.

28 авг 2016 в 19:25

Как самое короткое решение вашей исходной проблемы, попробуйте просто дописать случайный параметр к адресу скрипта, чтобы он точно обновился с сервера:
29 авг 2016 в 4:34

Можно попробовать добавить id вашей кнопке, например, , а затем добавить обработчик нажатия.

Отслеживать
ответ дан 28 авг 2016 в 16:54
Sleepy Panda Sleepy Panda
562 4 4 серебряных знака 9 9 бронзовых знаков

Наверно, ты используешь функцию ДО того, как скрипт загрузился. Браузер натыкается на

посылает запрос на сервер и погнал дальше анализировать код. Причем, код очень быстро анализируется и выполняется. Поэтому, браузер успевает «добежать» по коду до вызова функции, а скрипт с ней еще не успел загрузиться и, значит, не проанализирован — твоя функция еще не занесена прелоадсканнером в соответствующий объект-контекст исполнения кода.

С ходу придумал такой вариант — сделать сетинтервал, который будет проверять, а определена ли функция login_1() каждые сколько-то (например, 100) миллисекунд. если определена, то она выполняется и сетинтервал удаляется.

как вызвать функцию из другого файла js

Для вызова функции из другого файла js необходимо сначала загрузить этот файл в текущий скрипт. Это можно сделать с помощью тега в html файле, где вы хотите вызвать функцию. Например, если у вас есть файл functions.js , который содержит функцию myFunction , то вам нужно добавить следующий тег в html файл:

 src="functions.js">

После этого вы можете вызвать функцию myFunction в текущем скрипте. Например:

myFunction();

Если вы хотите вызвать функцию из другого файла js внутри модуля (ES6 и выше), вы можете использовать ключевое слово import . Например, если у вас есть файл functions.js со следующим содержимым:

export const myFunction = () =>  console.log('Hello world!'); >;

Тогда вы можете импортировать функцию myFunction в другом файле js следующим образом:

import  myFunction > from './functions.js'; myFunction();

Важно отметить, что для использования import и export вам нужно использовать модульный формат файла js (ES6 и выше), а также ваш файл js должен быть загружен в браузер с помощью тега .

Создаём свою функцию

Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в предыдущей статье. Попутно мы также объясним некоторые важные детали работы с функциями.

Предпосылки:	Базовая компьютерная грамотность, базовое понимание HTML и CSS, первые шаги в JavaScript, Функции — блоки кода используемые многократно.
Задача:	Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.

Активное обучение: построение функции

Пользовательская функция, которую мы собираемся построить, будет называться displayMessage() . Она отобразит настраиваемое окно сообщения на веб-странице и будет действовать как настраиваемая замена встроенной в браузер функции alert(). Мы видели эту функцию раньше. Введите следующую команду в консоли JavaScript браузера на любой странице:

alert("This is a message");

Функция alert принимает один аргумент — строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.

Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.

Примечание: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.

Основная функция

Для начала давайте соберём основную функцию.

Примечание: Для согласований имён функций нужно следовать тем же правилам, что и правила именования переменных. Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.

Откройте файл function-start.html и скопируйте его себе на компьютер. Код HTML в нем предельно прост: body содержит только одну кнопку. Также здесь представлен базовый CSS для создания настраиваемого окна сообщений и пустой элемент для размещения нашего JavaScript.
Затем добавьте строку внутри элемента :

function displayMessage() >

var html = document.querySelector("html"); var panel = document.createElement("div"); panel.setAttribute("class", "msgBox"); html.appendChild(panel); var msg = document.createElement("p"); msg.textContent = "This is a message box"; panel.appendChild(msg); var closeBtn = document.createElement("button"); closeBtn.textContent = "x"; panel.appendChild(closeBtn); closeBtn.onclick = function ()  panel.parentNode.removeChild(panel); >;

Рассмотрим этот код по строкам (прим. — в оригинале статьи: «bit by bit»).

var html = document.querySelector("html");

Затем мы используем ещё одну функцию DOM API, называемую Element.setAttribute() , чтобы установить атрибут class на нашей панели со значением msgBox . Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

Наконец, мы вызываем функцию DOM с именем Node.appendChild() в переменной html , которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель как дочерний элемент, который мы хотим вложить внутрь элемента . То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

var panel = document.createElement("div"); panel.setAttribute("class", "msgBox"); html.appendChild(panel);

В следующих двух разделах используются те же функции createElement() и appendChild() , которые мы уже видели, чтобы создать два новых элемента: и , и вставить их на страницу, как дочерних элементов панели . Мы используем свойство Node.textContent , которое представляет текстовое содержимое элемента, для вставки сообщения внутри абзаца и символ «x» внутрь кнопки. Нажатие/активация этой кнопки будет закрывать окно сообщения.

var msg = document.createElement("p"); msg.textContent = "This is a message box"; panel.appendChild(msg); var closeBtn = document.createElement("button"); closeBtn.textContent = "x"; panel.appendChild(closeBtn);

В заключении мы используем обработчик событий GlobalEventHandlers.onclick , чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.

Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию Node.removeChild() DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель .

.onclick = function ()  panel.parentNode.removeChild(panel); >;

В принципе, весь этот блок кода генерирует блок HTML, который выглядит так и вставляет его на страницу:

div class="msgBox"> p>This is a message boxp> button>xbutton> div>

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

Вызов функции

Теперь у вас есть определение функции, написанное в вашем элементе , но оно ничего не будет делать в том виде, в каком оно есть.

displayMessage();

var btn = document.querySelector("button");

.onclick = displayMessage;

Возможно, вам интересно, почему мы не включили круглые скобки после имени функции. Это связано с тем, что нам нужно не сразу вызвать функцию, а только после нажатия кнопки. Если вы попытаетесь изменить строку на

.onclick = displayMessage();

сохраните и перезагрузите страницу, вы увидите, что окно сообщения появляется без нажатия кнопки! Скобки в этом контексте иногда называют «оператором вызова функции». Вы используете их только в том случае, если хотите немедленно запустить функцию в текущей области. В этом же отношении код внутри анонимной функции не запускается сразу, так как он находится внутри области функций.

Если вы пробовали последний эксперимент, перед тем, как продолжить, обязательно отмените последнее изменение.

Улучшение функции с параметрами

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

function displayMessage()

function displayMessage(msgText, msgType)

.textContent = "This is a message box";

.textContent = msgText;

.onclick = displayMessage;

к этому блоку:

.onclick = function ()  displayMessage("Woo, this is a different message!"); >;

Более сложный параметр

Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр msgType установлен, функция отображала другой значок и другой цвет фона.

Примечание: иконки warning и chat были найдены на iconfinder.com, и разработаны Nazarrudin Ansyari. Спасибо! (Фактические страницы значков были перемещены или удалены.)

width: 200px;

измените на:

width: 242px;

padding-left: 82px; background-position: 25px center; background-repeat: no-repeat;

if (msgType === "warning")  msg.style.backgroundImage = "url(icons/warning.png)"; panel.style.backgroundColor = "red"; > else if (msgType === "chat")  msg.style.backgroundImage = "url(icons/chat.png)"; panel.style.backgroundColor = "aqua"; > else  msg.style.paddingLeft = "20px"; >

displayMessage("Woo, this is a different message!");

к одному из них:

displayMessage("Your inbox is almost full — delete some mails", "warning"); displayMessage("Brian: Hi there, how are you today?", "chat");

Примечание: Если у вас возникли проблемы с запуском примера, не стесняйтесь проверять свой код на готовой версии GitHub (см. также в режиме реального времени) или обратитесь к нам за помощью.

Вывод

В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.

В этом модуле

Принятие решений в вашем коде — условные конструкции
Зацикливание кода
Функции — Переиспользуемые блоки кода
Создайте свою собственную функцию
Возвращаемое значение функции
Введение в события
Создание галереи

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как вызвать функцию в html из *.js ?

Как в html получить ответ от функции и в зависимости от ответа открыть другие страницы?

if(authorized()) window.open("1.html") else window.open("2.html")

Так у меня что — то ничего не получается(ну тут конечно и условий нет, просто вызов, но он не работает):

script type="text/javascript">authorized()/script>