функция javascript не вызывается при отправке

ProgramBox

функция javascript не вызывается при отправке

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я написал простой html-код javascript для проверки имени пользователя и пароля, но функция authorize() не вызывается при отправке формы. Может ли кто-нибудь помочь мне найти ошибку в моем коде. Я знаю, что такой же вопрос существует, и я следил за ними, но я не смог найти свою ошибку. Спасибо. Ниже приведен мой код

 <script type="type/javascript" >

    var users = {{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}};

     function authorize()
    {
        var username= document.getElementById("username").value;
        var password = document.getElementById("password").value;

        for(var i=0;i<users.length;i  )
        {
            if(users[i].Username==username amp;amp; users[i].Password==password)
            {
                return true;
            }
        }

        alert("invalid username or password");
        return false;
    }

</script>

 <form action="enter_details.html" onsubmit="return authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

1. попробуйте проверить консоль разработчика, вы должны увидеть синтаксическую ошибку где-то рядом с var users = ...

2. Я предполагаю, что это просто какое-то хобби или демонстрационная система? Проверка имени пользователя и пароля в коде браузера совершенно небезопасна … любой может просто просмотреть исходный код страницы с помощью встроенных инструментов браузера, а затем просмотреть все сохраненные имена пользователей и пароли. Вы никогда не должны реализовывать это в реальной пользовательской системе

3. Во-первых , изменить свой код <script type=»type/javascript»> cause it’s not right , the right way is : <script type=»text/javascript»>

4. @rapaelec удивительно, что это сработало. Большое вам спасибо

Ответ №1:

Вы должны заключить свой массив JSON в квадратные (а не фигурные) скобки, например:

 var users = [{
    "Username": "Sunny",
    "Password": "Panzer"
  },
  {
    "Username": "Anjali",
    "Password": "406460"
  }
];

function authorize() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  for (var i = 0; i < users.length; i  ) {
    if (users[i].Username == username amp;amp; users[i].Password == password) {
      return true;
    }
  }
  alert("invalid username or password");
  return false;
}

 <form action="enter_details.html" onsubmit="return authorize()">
  <center>Username <input type="text" id="username"></center><br><br>
  <center>Password <input type="text" id="password"></center><br><br>
  <center><input type="submit" id="login_button" value="Log In"></center>
</form>

Ответ №2:

Здесь у нас есть две проблемы

1- пользователи должны быть массивом объектов, подобных :

 var users = [{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}];

2- когда вы вставляете свой код javascript в html, это не: type=»type / javascript», а type=»text / javascript»

для возобновления ваш код должен быть похож :

 <script type="text/javascript">
    
                var users = [{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}];
            
                function authorize()
                {
                    var username= document.getElementById("username").value;
                    var password = document.getElementById("password").value;
            
                    for(var i=0;i<users.length;i  )
                    {
                        if(users[i].Username==username amp;amp; users[i].Password==password)
                        {
                            return true;
                        }
                    }
            
                    alert("invalid username or password");
                    return false;
                }
            
            </script>

Я надеюсь, что это поможет вам

Ответ №3:

Попробуйте использовать прослушиватели событий

Добавьте атрибут id в форму

 <form id="myForm" action="enter_details.html" onsubmit="return authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

И добавьте код прослушивателя событий в is

 document.querySelector("#myForm")
.addEventListener("submit", function(eve) {
    eve.preventDefault();
    authorize();
}

Если это не сработало, попробуйте использовать кнопку ввода

 document.querySelector("#login_button")
.addEventListener("click", function(eve) {
    eve.preventDefault();
    authorize();
}

Ответ №4:

 var users = [{"Username":"Sunny","Password":"Sunny"},{"Username":"Anjali","Password":"406460"}];

function authorize(){
        var username= document.getElementById("username").value;
        var password = document.getElementById("password").value;

        for(var i=0;i<users.length;i  )
        {
            if(users[i].Username==username amp;amp; users[i].Password==password)
            {
                return true;
            }
        }

        alert("invalid username or password");
        return false;
}

 <form onsubmit="authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

Ответ №5:

Если вы хотите использовать функцию обратного вызова для отправки формы, вам нужно нажать кнопку отправки и использовать event.preventDefault(); для предотвращения перехода на страницу при обратном вызове, который является действием формы по умолчанию

 <form>
  <center>Username  <input type="text" id="username"></center><br><br>
  <center>Password  <input type="text" id="password"></center><br><br>
  <center><input type="submit" onclick="authorize(event)" id="login_button"  value="Log In"></center>
</form>






<script>

    var users = [{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}];

     function authorize(event)
    {
        event.preventDefault();
        var username= document.getElementById("username").value;
        var password = document.getElementById("password").value;

        for(var i=0;i<users.length;i  )
        {
            if(users[i].Username==username amp;amp; users[i].Password==password)
            {
                return true;
            }
        }

        alert("invalid username or password");
        return false;
    }

</script>

Ответ №6:

Я считаю, что ваша основная проблема заключается в том, что переменная users должна быть an array . Ваш текущий синтаксис недопустим для определения переменной users и выдаст ошибку (вы можете проверить консоль, чтобы увидеть это). Проверьте следующий пример с этим исправлением.

 var users = [
  {"Username":"Sunny","Password":"Panzer"},
  {"Username":"Anjali","Password":"406460"}
];

function authorize()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    for (var i = 0; i < users.length; i  )
    {
        if (users[i].Username == username amp;amp; users[i].Password == password)
        {
            return true;
        }
    }

    alert("invalid username or password");
    return false;
}

 <form onsubmit="return authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

Более того, вы можете немного упростить authorize() функцию, если используете Array.some():

 function authorize()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    let res = users.some(user => user.Username == username amp;amp; user.Password == password);

    if (!res)
        alert("invalid username or password");

    return res;
}

1. Я сделал это, но, однако, он не проверяется, когда я запускаю его в своем браузере. И поскольку ваш код в ответе и мой код одинаковы после изменений, он выполняется, когда я запускаю ваш код, сокращенный под вашим ответом.