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

212

06 апреля 2022, 09:00

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

Answer 2

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

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

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.

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нумерация слайдов в slick slider

У меня есть слайдер написанный на slick slider(там есть клавиши переключения, но речь не о них)У меня в макете есть цифры переключения слайдера(картинка...

HTML

Как изменить фоновое видео на HTML-странице через определенное время?

Я бы хотел сделать 2 фоновое видео на страницуПервое видео фиксируется на указанный период времени, второе после предыдущего и является постоянным

200

HTML

Mixitup фильтр. Настроить сортировку

Помогите пожалуйста с фильтром mixitup Как сделать так что-бы при перезагрузке страницы, фильтр сразу сортировал по Первому залу и 14 числу?? Сейчас...

145

c++

Могут ли следующие константы сделать тип не POD-ом?

Рассмотрим следующий код:

144