Как связать внешний файл JavaScript нажатием кнопки - PullRequest
Новая
       7

Как связать внешний файл JavaScript нажатием кнопки

30 голосов
/ 17 октября 2011

Файл javascript находится в Public / Scripts / filename.js. У меня есть файл шаблона в template / form.tmpl.html. Корневая папка содержит общие и шаблонные папки

Я хотел бы вызвать файл javascript по щелчку кнопки в форме .tmpl.htm. 

  <button type="button" value="Submit" onClick="Call the external js file" >

Спасибо

Ответы [ 8 ]

38 голосов
/ 17 октября 2011

Я должен согласиться с комментариями выше, что вы не можете вызвать файл, но вы можете загрузить файл JS, как этот, я не уверен, что он отвечает на ваш вопрос, но это может помочь ... о, и я Я использовал ссылку вместо кнопки в моем примере ... 

<a href='linkhref.html' id='mylink'>click me</a>

<script type="text/javascript">

var myLink = document.getElementById('mylink');

myLink.onclick = function(){

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "Public/Scripts/filename.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;

}


</script>
27 голосов
/ 18 февраля 2015

Если вы хотите, чтобы ваша кнопка вызывала подпрограмму, написанную вами в filename.js, вы должны отредактировать filename.js так, чтобы код, который вы хотите запустить, был телом функции . Поскольку вы можете вызывать функцию, не исходный файл. (Исходный файл не имеет точки входа )

Если текущим содержимым вашего filename.js является: 

alert('Hello world');

Вы должны изменить его на: 

function functionName(){
	alert('Hello world');
}

Затем вам нужно загрузить filename.js в заголовок вашей html-страницы строкой: 

<head>
	<script type="text/javascript" src="Public/Scripts/filename.js"></script>
</head>

, чтобы вы могли вызвать функцию , содержащуюся в filename.js, с помощью вашей кнопки: 

<button onclick="functionName()">Call the function</button>

Я сделал небольшой рабочий пример. Простая HTML-страница просит пользователя ввести свое имя, и когда она нажимает кнопку, вызывается функция внутри Public / Scripts / filename.js, которая передает вставленную строку в качестве параметра, так что всплывающее окно говорит: «Здравствуйте, ! ».

Вот HTML-страница вызова: 

<html>

	<head>
		<script type="text/javascript" src="Public/Scripts/filename.js"></script>
	</head>

	<body>
		What's your name? <input  id="insertedName" />
		<button onclick="functionName(insertedName.value)">Say hello</button>
	</body>

</html>

А вот Public / Scripts / filename.js 

function functionName( s ){
	alert('Hello, ' + s + '!');
}
5 голосов
/ 18 марта 2017

При загрузке файла .js и последующем вызове функции с помощью onclick становится меньше кодирования, и совершенно очевидно, что происходит.Мы назовем файл JS zipcodehelp.js.

HTML: 

<!DOCTYPE html>
<html>
<head>
    <title>Button to call JS function.</title>
</head>
<body>
    <h1>Use Button to execute function in '.js' file.</h1>
    <script type="text/javascript" src="zipcodehelp.js"></script>
    <button onclick="ZipcodeHelp();">Get Zip Help!</button>
</body>
</html>

. И содержимое zipcodehelp.js будет: 

function ZipcodeHelp() {
  alert("If Zipcode is missing in list at left, do: \n\n\
    1. Enter any zipcode and click Create Client. \n\
    2. Goto Zipcodes and create new zip code. \n\
    3. Edit this new client from the client list.\n\
    4. Select the new zipcode." );
}

Надеюсь, это поможет!Ура!

–Ken

4 голосов
/ 27 августа 2015

Вполне возможно, я сделал что-то похожее на примере Майка Сэва.Это HTML-страница и внешний файл test.js в той же папке

example.html: 

<html>
<button type="button" value="Submit" onclick="myclick()" >
Click here~!
<div id='mylink'></div>
</button>
<script type="text/javascript">
function myclick(){
    var myLink = document.getElementById('mylink');
    myLink.onclick = function(){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "./test.js"; 
            document.getElementsByTagName("head")[0].appendChild(script);
            return false;
    }
    document.getElementById('mylink').click();
}
</script>
</html>

test.js: 

alert('hello world')
2 голосов
/ 14 июля 2015

Вы можете просто сделать следующее.

Допустим, у вас есть файл JavaScript с именем myscript.js в корневой папке. Добавьте ссылку на исходный файл javascript в тег head вашего html-файла. 

<script src="~/myscript.js"></script>

файл JS: (myscript.js) 

function awesomeClick(){
  alert('awesome click triggered');
}

HTML 

<button type="button" id="jstrigger" onclick="javascript:awesomeClick();">Submit</button>
1 голос
/ 20 февраля 2018

похоже, что невозможно вызвать функцию во внешнем js-файле (тест на chrome версии 63.0.3239.132). Я пробовал это разными способами, но это не может. Я должен использовать прослушиватель событий.

0 голосов
/ 11 января 2018

Добавление динамического скрипта в заголовок Вы можете написать функцию и добавить элемент скрипта с помощью пути к файлу src из js

0 голосов
/ 13 апреля 2016

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...