1

Пробую так, но выводит undefined:

document.addEventListener('DOMContentLoaded', () => {
  'use strict';

  const blockLogin = document.getElementById('blockLogin');
  const pass = document.getElementById('pass');
  let name = document.getElementById('name');
  const btn = document.getElementById('btn');

  const mainBlock = document.getElementById('displayMessages');
  const windMes = document.getElementById('window');
  let lookName = document.getElementById('look-name').innerHTML = $('name').val();
  const btn2 = document.getElementById('btn2');
  let message = document.getElementById('message').value;

  const login = [];

  btn.addEventListener('click', () => {
    blockLogin.addEventListener('submit', event => {
      event.preventDefault();

      const obj = {};

      for (let elem of blockLogin.elements) {
        if (elem.tagName === 'INPUT' && elem.checked) {
          obj[elem.name] = elem.value;
        }
      }

      mainBlock.style.display = "block";
      blockLogin.style.display = "none";

      login.push(obj);

      console.log(login);

    });
  });
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="prac.css">
</head>

<body>

  <div id="wrapper">
    <form id="blockLogin">
      <label id="labName" for="Name">Name:</label>
      <input type="text" name="Name" id="name" maxlength="15" value="" checked>
      <br />
      <br />
      <label id="labPass" for="Password">Password:</label>
      <input type="password" name="Password" id="pass" maxlength="20" checked>
      <button type="submit" id="btn">Зарегистрироваться</button>
    </form>

    <div id="displayMessages">
      <span id="look-name"></span>
      <div id="window"></div>
      <div id="mainElementsMessage">
        <input type="text" id="message" value="" name="message">
        <button type="submit" id="btn2">Отправить</button>
      </div>
    </div>
  </div>

  <script src="prac.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>

</html>

2 ответа 2

1

document.addEventListener('DOMContentLoaded', () => {
  'use strict';

  const blockLogin = document.getElementById('blockLogin');
  const pass = document.getElementById('pass');
  let name = document.getElementById('name');
  const btn = document.getElementById('btn');

  const mainBlock = document.getElementById('displayMessages');
  const windMes = document.getElementById('window');
  const btn2 = document.getElementById('btn2');
  let message = document.getElementById('message').value;

  const login = [];

  btn.addEventListener('click', () => {
    blockLogin.addEventListener('submit', event => {
      event.preventDefault();

      const obj = [];

      for (let elem of blockLogin.elements) {
        if (elem.tagName === 'INPUT' && elem.checked) {
          obj.push(elem.value);
        }
      }

      login.push(obj);

      mainBlock.style.display = "block";
      blockLogin.style.display = "none";

      let lookName = document.getElementById('look-name').innerHTML = 'Login: ' + login[0][0] + ' Password:' + login[0][1];
    });
  });
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="prac.css">
</head>

<body>
  <div id="wrapper">
    <form id="blockLogin">
      <label id="labName" for="Name">Name:</label>
      <input type="text" name="Name" id="name" maxlength="15" value="" checked>
      <br />
      <br />
      <label id="labPass" for="Password">Password:</label>
      <input type="password" name="Password" id="pass" maxlength="20" checked>
      <button type="submit" id="btn">Зарегистрироваться</button>
    </form>

    <div id="displayMessages">
      <span id="look-name"></span>
      <div id="window"></div>
      <div id="mainElementsMessage">
        <input type="text" id="message" value="" name="message">
        <button type="submit" id="btn2">Отправить</button>
      </div>
    </div>
  </div>

  <script src="prac.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>

3
  • Выводит undefined
    – Jhoss
    9 фев 2020 в 9:39
  • @Jhoss Скопируйте код полностью. Если Вы вносите изменения частями - то будьте внимательны и обращайте внимание не все остальные изменённые части кода. Всё работает 100%
    – Denis640Kb
    9 фев 2020 в 9:42
  • Спасибо, все сработало
    – Jhoss
    9 фев 2020 в 9:44
0

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

Попробуйте убрать всё лишнее.

document.getElementById('look-name').innerHTML = $('[name="name"]').val();
<input type="text" name="name" value="test">
<span id="look-name"></span>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Так гораздо проще и тем, кому вы показываете свой код, и даже вам! Ведь в таком небольшом кусочке сразу видно что ваша проблема в селекторе jquery.

Когда вы разобрались с первой проблемой, приступайте к следующей. Локализуйте её тоже. Вы увидите, что многие затруднения вызывают маленькие ошибки, которые теряются в больших кусках кода.

2
  • Сделал как вы, щас просто пустая строка выводится
    – Jhoss
    9 фев 2020 в 9:32
  • @Jhoss так в тот момент, когда вы копируете значение, оно пустое. Следующий шаг (если я правильно понимаю задачу) -- это записывать значение при наступлении какого-то события (нажатия на кнопку). Дерзайте, у вас получится. 9 фев 2020 в 11:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.