Блог

Главная - Вопросы по программированию - Неперехваченная ошибка типа: не удается прочитать свойство ‘value’

Неперехваченная ошибка типа: не удается прочитать свойство ‘value’

#javascript #html #function #frontend #typeerror

#javascript #HTML #функция #интерфейс #ошибка типа

Вопрос:

Итак, я пытаюсь создать базовую функцию, которая устанавливает для моей переменной username значение в нижнем регистре, но я продолжаю получать TypeError

Сообщение об ошибке: index.js: 12 Неперехваченная ошибка типа: не удается прочитать значение свойства undefined в HTMLFormElement.onSubmit (index.js:12)

Если бы кто-нибудь мог понять, что я здесь делаю неправильно, я был бы очень признателен.

 const logform = document.querySelector('#logform');
var username = document.querySelector('#usernameinput');
const password = document.querySelector('#passwordinput');

logform.addEventListener('submit', onSubmit);

function onSubmit(e) { //takes in event parameter
  e.preventDefault();

  var username = username.value.toLowerCase();
  console.log(username.value);
} 
 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login Portal</title>
  <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>

  <div class="loglogo">
    <!-- logo container -->
    <a href="https://www.waspc.org/" target="_blank">
      <img src="IMAGE/logo.png" alt="IMAGE">
    </a>
  </div>

  <form id="logform">

    <div class="logscreen">
      <!-- login container -->

      <label><strong>Username</strong></label>
      <!-- Username field -->
      <input autocomplete="off" id="usernameinput" type="text" name="" placeholder="Enter Username" required>

      <label><strong>Password</strong></label>
      <!-- Password field -->
      <input id="passwordinput" type="password" name="" placeholder="Enter Password" required>



      <button type="submit"><a href="home.html">Login</a></button>
      <!-- Login button -->
      <button class="newbutton" type="button"><a href="newuser.html">New User</a></button>
      <!-- New User button -->
      <button type="reset">Cancel</button>
      <!-- Cancel button -->

    </div>

  </form>

  <script src="JS/index.js"></script>
</body>

</html>

Комментарии:

1. вам необходимо предоставить дополнительную информацию, такую как HTML-код и вывод журнала

2. Является ли элемент с id=»usernameinput» полем формы и существует ли он во время присвоения переменной?

3. попробуйте console.log(имя пользователя)… вы уже установили username в строковый тип или что-то в этом роде, но не объект

4. удалите ссылку из <button type="submit"><a href="home.html">Login</a></button> и переименуйте переменную из username в user

5. Вы затеняете username . username In username.value.toLowerCase() ссылается на username то, что вы объявили в той же строке, а не на то, что вы объявили вверху. (Уверен, что где-то есть какой-то обман.)

Ответ №1:

Я думаю, что это может быть конфликт именования с. username Смотрите ниже:

 const elUsernameInput = document.querySelector('#usernameinput');
const elPasswordInput = document.querySelector('#passwordinput');

logform.addEventListener('submit', onSubmit);

function onSubmit(e) { //takes in event parameter
    e.preventDefault();

    const username = elUsernameInput.value.toLowerCase();
    console.log(username.value);
}

Если это не сработает:

  • Убедитесь, что ваш скрипт включен после полей ввода и полей формы в HTML.
  • Убедитесь logform , что оно где-то установлено. Вам может понадобиться другой поиск, например const elLogForm = document.querySelector('#logform') .
  • Убедитесь id , что s, которые вы указали в скрипте, присутствуют в правильных элементах.
Метки: