2015-11-21 2 views
0

При попытке вызвать функцию JavaScript из файла .js из файла .html функция не вызывается.Почему кнопка HTML не вызывает функцию назначенного события onclick

Проект иерархии:

  • HTML (папка)
    • main.html
  • JS (папка)
    • script.js

Пример # 1 - с помощью .html - Работы

main.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Main page</title> 
    </head> 
    <body> 
     <label id="label1"></label> 
     <input id="text1" type="text"/> 
     <button onclick="document.getElementById('label1').innerHTML = document.getElementById('text1').value">Button</button> 
    </body> 
</html> 

Пример # 2 - с использованием .html и .js - Не работает

Главный .html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Main page</title> 
    </head> 
    <body> 
     <label id="label1"></label> 
     <input id="text1" type="text"/> 
     <button onclick="outputInput()">Button</button> 

     <script src="/js/script.js"></script> 
    </body> 
</html> 

script.js

function outputInput(){ 
    document.getElementById('label1').innerHTML = document.getElementById('text1').value;} 
+1

Может быть несколько вещей. Было бы очень полезно, если бы вы проверили любую ошибку в консоли JavaScript и удостоверились, что сценарий загружен. – Touffy

+1

Touffy благодарит вас за ответ, как я могу проверить ошибки JavaScript? Кстати, я использую WebStorm. – Eido95

+1

Откройте свою веб-страницу в браузере. В зависимости от браузера вам может потребоваться включить инструменты dev. Затем найдите, где у вашего браузера есть инструменты разработчика/консоль JavaScript/инспектор WebKit ... консоль, вероятно, также покажет вам, была ли ошибка 404 при попытке получить скрипт. – Touffy

ответ

1

В вашем <script src="/js/script.js"></script>, вы используете абсолютный URL. Основываясь на дополнительном тестировании, похоже, что ваша папка «js» находится не в корне вашего сайта, и поэтому ее там нет. Использование относительного URL src="../js/script.js" более терпимо относительно того, где вы вкладываете вещи.

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