Как получить значение из input и вывести его в поле тега span?

Question

Пробую так, но выводит 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>

Answer 1

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

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

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.

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

Answer 2

    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>

БЛОГ НА HUSL

Как получить значение из input и вывести его в поле тега span?

Ответы (2 шт):