#javascript
Вопрос:
Я постараюсь быть как можно более точным, я делаю это для создания поста, и в основном пользователь вводит свое имя пользователя и все, что он хочет сказать в #addPost, и это «публикуется» в #mainBody. Теперь, когда это работает, я хочу иметь возможность создать еще один пост, не удаляя свой старый пост. Я хочу, чтобы это просто пошло ко дну.
let add = document.getElementById("addPost") let usrInp = document.getElementById("username__input") let pstInp = document.getElementById("post__input") let usr = document.getElementById("username__post") let pst = document.getElementById("post__published") let post__body = document.getElementById("mainBody") let post = document.getElementById("post") function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } usr.innerHTML = usrInp.value pst.innerHTML = pstInp.value post__body.style.border = "1px solid lightgray" post__body.style.borderRadius = "10px" if (usrInpStr.length gt; 0 amp;amp; pstInpStr.length gt; 0){ usrInp.value = "" pstInp.value = "" post.style.background = "rgb(37, 202, 31)" post.innerHTML = "Posted ✔️" } } lt;div id="addPost"gt; lt;div class="title"gt;Create new post lt;i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"gt;lt;/igt; lt;/divgt; lt;div class="name"gt; lt;input type="Name__Post" placeholder="Username" id="username__input" requiredgt; lt;/divgt; lt;div class="post"gt; lt;textarea placeholder="What's on your mind?" id="post__input"gt;lt;/textareagt; lt;/divgt; lt;divgt; lt;button type="submit" onclick="Post()" id="post"gt;Postlt;/buttongt; lt;/divgt; lt;/divgt; lt;div id="mainBody"gt; lt;div class="username"gt; lt;span id="username__post"gt;lt;/spangt; lt;/divgt; lt;div class="date"gt;lt;/divgt; lt;div class="post"gt; lt;p id="post__published"gt;lt;/pgt; lt;/divgt; lt;/divgt; Комментарии:
1. Не нацеливайтесь на определенный элемент в организме. Извлеките вводимые пользователем данные, а затем создайте новые элементы, которые будут их содержать. Поместите эти элементы в div или любой другой костюм, а затем добавьте этот элемент в тело.
2. Привет, Киро, посмотри ответ ниже. Дайте мне знать, если вам понадобится дополнительная помощь. мир вне
Ответ №1:
let add = document.getElementById("addPost") let usrInp = document.getElementById("username__input") let pstInp = document.getElementById("post__input") let usr = document.getElementById("username__post") let pst = document.getElementById("post__published") let post__body = document.getElementById("mainBody") let post = document.getElementById("post") function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } // usr.innerHTML = usrInp.value // pst.innerHTML = pstInp.value let htmll = `lt;div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;"gt; lt;divgt; lt;spangt;` usrInp.value `lt;/spangt; lt;/divgt; lt;div class="date"gt;lt;/divgt; lt;div class="post"gt;lt;pgt;` pstInp.value `lt;/pgt;lt;/divgt; lt;/divgt;`; post__body.innerHTML = htmll; // post__body.style.border = "1px solid lightgray" // post__body.style.borderRadius = "10px" if (usrInpStr.length gt; 0 amp;amp; pstInpStr.length gt; 0){ usrInp.value = "" pstInp.value = "" post.style.background = "rgb(37, 202, 31)" post.innerHTML = "Posted ✔️" } } lt;div id="addPost"gt; lt;div class="title"gt;Create new post lt;i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"gt;lt;/igt; lt;/divgt; lt;div class="name"gt; lt;input type="Name__Post" placeholder="Username" id="username__input" requiredgt; lt;/divgt; lt;div class="post"gt; lt;textarea placeholder="What's on your mind?" id="post__input"gt;lt;/textareagt; lt;/divgt; lt;divgt; lt;button type="submit" onclick="Post()" id="post"gt;Postlt;/buttongt; lt;/divgt; lt;/divgt; lt;div id="mainBody"gt; lt;/divgt; Комментарии:
1. Но еще один вопрос, разные сообщения добавляются в одно и то же поле, как мне добавить поле с другим текстом? Как будто у каждого поста есть свой ящик?
2. Хорошо, позвольте мне обновить код для вас, а затем дайте мне знать, что вы хотите что-то подобное.
3. @kiro — код, который я предоставил, уже делает это. Каждый триплет комментариев/имени пользователя/даты находится внутри div с классом
userComment. Элементы с этим стилем имеют границу и некоторые отступы под ними, чтобы поля для комментариев не соприкасались друг с другом.4. @kiro Я обновил код, проверьте его. Теперь они находятся в отдельных коробках. Вы можете настроить дальнейший CSS по своему усмотрению. Спасибо
5. Эй, чувак, ответь на вопрос, один из дивов, которые я создал в js. скажем, опубликуйте тот, на который я хочу нацелиться в документе js. как мне это сделать? потому что он не идентифицирован в js и не является частью переменной.
Ответ №2:
Вы можете добавлять новые значения в контейнер (#myList) после каждой отправки.
let add = document.getElementById("addPost") let usrInp = document.getElementById("username__input") let pstInp = document.getElementById("post__input") let usr = document.getElementById("username__post") let pst = document.getElementById("post__published") let post__body = document.getElementById("mainBody") let post = document.getElementById("post") function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } // usr.innerHTML = usrInp.value // pst.innerHTML = pstInp.value // this lines var node = document.createElement("LI"); var textnode = document.createTextNode(usrInp.value ' - '); var textnode2 = document.createTextNode(pstInp.value); node.appendChild(textnode); node.appendChild(textnode2); document.getElementById("myList").appendChild(node); // // -- post__body.style.border = "1px solid lightgray" post__body.style.borderRadius = "10px" if (usrInpStr.length gt; 0 amp;amp; pstInpStr.length gt; 0){ usrInp.value = "" pstInp.value = "" post.style.background = "rgb(37, 202, 31)" post.innerHTML = "Posted ✔️" } } lt;div id="addPost"gt; lt;div class="title"gt;Create new post lt;i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"gt;lt;/igt; lt;/divgt; lt;div class="name"gt; lt;input type="Name__Post" placeholder="Username" id="username__input" requiredgt; lt;/divgt; lt;div class="post"gt; lt;textarea placeholder="What's on your mind?" id="post__input"gt;lt;/textareagt; lt;/divgt; lt;divgt; lt;button type="submit" onclick="Post()" id="post"gt;Postlt;/buttongt; lt;/divgt; lt;/divgt; lt;div id="mainBody"gt; lt;div class="username"gt; lt;span id="username__post"gt;lt;/spangt; lt;/divgt; lt;div class="date"gt;lt;/divgt; lt;div class="post"gt; lt;p id="post__published"gt;lt;/pgt; lt;/divgt; lt;/divgt; lt;!-- this line --gt; lt;ul id="myList"gt;lt;/ulgt; Ответ №3:
Вот пример того, к чему я клонил в своем предыдущем комментарии.
Обратите внимание на этот template элемент. Это позволяет очень легко и легко читать спецификацию контента, который будет добавляться динамически. Вместо набора document.createElemnt someElement.appendChild вызовов и мы просто дублируем содержимое шаблона, а затем заполняем его перед добавлением в тело.
Проверка ошибок удалена для краткости.
lt;!doctype htmlgt; lt;htmlgt; lt;headgt; lt;scriptgt; "use strict"; function byId(id){return document.getElementById(id);} window.addEventListener('load', onLoad, false); function onLoad(evt) { byId('addPostBtn').addEventListener('click', onPostBtnClicked, false); } function onPostBtnClicked(evt) { let userInput = byId('username__input'); let commentInput = byId('post__input'); let newNode = byId('commentTemplate').content.cloneNode(true); newNode.querySelector('.user').textContent = userInput.value; newNode.querySelector('.date').textContent = 'date posted'; newNode.querySelector('.comment').textContent = commentInput.value; document.body.appendChild(newNode); userInput.value = ''; commentInput.value = ''; } lt;/scriptgt; lt;template id='commentTemplate'gt; lt;div class='userComment'gt; lt;div class='user'gt;lt;/divgt; lt;div class='date'gt;lt;/divgt; lt;div class='comment'gt;lt;/divgt; lt;/divgt; lt;/templategt; lt;stylegt; .userComment { margin-bottom: 16px; border: solid 2px #888; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div id="addPost"gt; lt;div class="title"gt;Create new postlt;/divgt; lt;div class="name"gt; lt;input type="Name__Post" placeholder="Username" id="username__input" requiredgt; lt;/divgt; lt;div class="post"gt; lt;textarea placeholder="What's on your mind?" id="post__input"gt;lt;/textareagt; lt;/divgt; lt;divgt; lt;button id="addPostBtn"gt;Post Commentlt;/buttongt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;