Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.05.2020, 10:47
Новичок на форуме
Отправить личное сообщение для ABitOfJS Посмотреть профиль Найти все сообщения от ABitOfJS
 
Регистрация: 15.05.2020
Сообщений: 5

Отображение содержимого input
Итак, доброго времени суток! Назрело пару вопросов по моему коду. Ну, для начала сам код:
<html>
<head>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
  const inp = document.getElementById('message'),
        div = document.getElementById('messagebox'),
        btn = document.getElementById('send');
  btn.addEventListener('click', function () {
    if (inp.value.length)
      div.innerHTML += '<span class="newmessage">' + inp.value + '</span><br><br>'; 
  });
});
</script>
<style>
.newmessage {
width: 70vw;
max-height: 500px;
overflow: auto;
border: 2px solid black;
border-radius: 10px 10px 10px 10px / 5px 5px 5px 5px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<input type="text" id="name" placeholder="Ваше имя"><input type="button" id="letname" value="Сохранить имя">
<hr>
    <input id="send" type="reset" value="Отправить">
    <textarea id="message"></textarea>
    <div id="messagebox"></div>
</body>
</html>

Код выводит тот текст, который юзер ввёл в #message. Но... Я не знаю как правильно сохранить .newmessage. localStorage? Да, его можно использовать, но как? Для каждого отдельного сообщения делать новую переменную? А если сообщений будет миллион ? Обернуть каждый .newmessage? Тогда как?
Еще проблема: если в сообщении есть перевод на новую строчку, то в .newmessage эти переводы отображаюся всего лишь как пробелы. Есть возможность отобразить сообщение "как есть"?
Ах да, ещё забыл сказать. Как можно сохранить значение #name, и потом в каждом .newmessage выводить сохранённый текст?
Ответить с цитированием
  #2 (permalink)  
Старый 23.05.2020, 11:23
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

1. Сохраняй сообщения в массив (let temp = []) перед выводом в HTML.
Добавить сообщение в массив: temp.push(inp.value);

2. Дальше записывай в хранилище массив temp (но его нужно сначала привести к JSON). Вот функция:

function setInp(temp) {
  localStorage.setItem('saveInp', JSON.stringify(temp));
}


3. При загрузке страницы - функция, которая читает:
function getInp() {
  temp = JSON.parse(localStorage.getItem('saveInp'));
}


4. Теперь в массиве temp есть все сообщения и их нужно только вывести циклом в HTML.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отследить появления содержимого в iframe и input atanov Javascript под браузер 14 08.08.2017 12:34
перемещение содержимого из поля input в другое поле input при помощи нажатия на кнопк scrapmetal Events/DOM/Window 3 22.03.2015 19:45
Отображение input pbezpal Элементы интерфейса 2 14.11.2014 14:34
События при изменении содержимого input sean88 jQuery 2 17.09.2014 15:42
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27