2015-03-09 4 views
0

Javascript новичокНе может найти яваскрипт функции

Я получаю следующее сообщение об ошибке, но не могу видеть то, что не так с кодом. Я сделал аналогичные в предыдущих семинарах, и они в порядке? У меня есть «требуемая» функция в workshop12.js и вы хотите использовать ее для проверки того, что вход не пуст. Я взял код из W3Schools http://www.w3schools.com/js/js_validation.asp

enter image description here

JS

$(document).ready(function() { 

    // Check that input is not empty 
    function required() { 
     var x = document.forms["loginForm"]["inputName"].value; 
     document.write (x); 
     if(x = " ") { 
      alert("Please input a value"); 
      return false; 
     } 
     else { 
      alert("Correct"); 
      return true;  
     } 
    } 

}); 

HTML

<body> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-offset-2 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6"> 
     <h2>Login form</h2> 
     </div> 
     <div class="clearfix visible-md clearfix visible-lg"></div> 
    </div> 
    <form name="loginForm" class="form-horizontal"> 
     <div class="form-group"> 
     <label for="inputName" class="col-sm-2 col-md-2 col-lg-3 control-label">Name</label> 
     <div class="col-sm-10 col-md-8 col-lg-6"> 
      <input type="text" class="form-control" name="inputName" "id="inputName" placeholder="Name" onclick="required()"> 
      <div class="col-md-2 col-lg-3"></div> 
     </div> 
     </div> 
     <div class="form-group"> 
     <label for="inputEmail" class="col-sm-2 col-md-2 col-lg-3 control-label">Email</label> 
     <div class="col-sm-10 col-md-8 col-lg-6"> 
      <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
      <div class="col-md-2 col-lg-3"></div> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10 col-md-offset-3 col-md-9 col-lg-offset-3 col-lg-9"> 
      <button type="submit" class="btn btn-primary">Submit</button> 
     </div> 
     </div> 
    </form> 
    </div> 

<script type="text/javascript" src="js/workshop12.js"></script> 

</body> 
+0

Похоже, вы также используете jQuery. Вы тоже не забыли включить это? – j08691

+2

вы скрываете его в объеме готовой функции. –

+0

@ j08691 Да включили jquery-

ответ

4

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

Ваш элемент ищет эту функцию в глобальном масштабе. Перемещение функции вне функции ready, как показано ниже:

$(document).ready(function() { 

    ... whatever 

}); 

// Check that input is not empty 
function required() { 
    var x = document.forms["loginForm"]["inputName"].value; 
    document.write (x); 
    if(x = " ") { 
     alert("Please input a value"); 
     return false; 
    } 
    else { 
     alert("Correct"); 
     return true;  
    } 
} 
+1

Я также хотел бы отметить, что в глобальной области с именем 'required' может быть что-то уже существующее. В chrome при вызове undefined он записывает 'required() VM244: 2 Uncaught ReferenceError: required не определен' и в firefox' required() ReferenceError: required не определен' –

+0

@ Daniel A White & Jamiec. Я переместил его, как рекомендовано, но все равно получаю ту же самую ошибку –

+0

@Austin. Приветствия. Я изменил имя и решил его. –

2

У вас есть проблема рамочный.

В Javascript есть различные виды областей.

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

Пример для глобального масштаба:

window.bla = "I am global scoped"; 

var globalVar = "I am also global scoped"; 

function accessGlobal(){ 
console.log (globalVar) 
} 

Теперь есть также область видимости функции: переменные, объявленные внутри функции локально области действия и не доступны извне (Если вы больше похожи на ребят, Java, думать это как частные переменная)

function private(){ 
    var privateVar = "I am a private var"; 
} 

Ваша требуемая функция не доступна во всем мире из-за того, что вы использовали onReady функции JQuery в.

Смотреть это:

$(document).ready(function() { 

Вы видите функцию? Из-за этого ваша требуемая функция - это область действия.

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

Попробуйте это:

var myModule = {}; 

myModule.required = function(){ 
var x = document.forms["loginForm"]["inputName"].value; 
     document.write (x); 
     if(x.length === 0) { 
      alert("Please input a value"); 
      return false; 
     } 
     else { 
      alert("Correct"); 
      return true;  
     } 
} 

и в вашем HTML-коде, использование заменить требуется() с myModule.required();

Кстати, в вашей требуемой функции вы допустили еще одну ошибку. Вы пытались проверить, выполнено ли переменная пуста, как это:

if (x = " ") 

В Javascript необходимо проверить переменные с помощью == или лучше ===.(Я изменил это в вашем коде)

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

E.g.

"1" == 1 //true 
"1" === 1//false because string and number are different 
Смежные вопросы