如何保持用户输入的内容打印? [英] How to keep user's input printed?
问题描述
我正在尝试添加用户的评论，因此我只是尝试读取输入并将其发送以进行打印，但问题是，刷新页面或输入其他输入后，打印的输入就会消失.
I'm trying to add a comments from user, so I just tried to read the input and send it to print it , but the problem is that the printed input disappears as soon as I refresh the page or enter another input.
因此，即使刷新页面或重新输入新评论时，我也希望所有用户始终显示.
so I want to keep all user's appearing always even when refreshing the page or re-entering a new comment.
代码:
<div>
<input type="text" name="comments" placeholder = "Your comment goes here .. " class = "sug-box" id = "UserComment">
<button class = "send-box" onclick="go()">Add</button><i class="fa fa-send-o"></i>
<p id = "t"></p>
</div>
<script>
function go(){
var x = document.getElementById("UserComment").value;
document.getElementById("t").innerHTML = x;
}
</script>
推荐答案
我认为我有一个适合您的解决方案.我对您的一些代码进行了重命名和重构，如果您愿意，可以随时将其更改回原始版本.对我来说，这更容易阅读.我也将JS放在一个单独的文件中，但是您可以使用script标记完成相同的任务.
I think I have a solution that should work for you. I have renamed and refactored some of your code a little, feel free to change it back to the original version if you wish. For me, this was easier to read. I also put the JS in a separate file, but you could accomplish the same task using the script tag.
这里是指向JSFiddle的链接，该链接在操作中显示了它 JSFiddle用户评论应用程序 . 小提琴中的代码已被修改为可以在该站点上使用，请不要关注它，请看下面的示例！您无法在JSFiddle上进行页面刷新，因此我使用了刷新页面"按钮和一个小的计时器功能来模拟它，该功能可以清除列表，然后从本地存储中重新填充它.
Here is a link to a JSFiddle that shows it in action JSFiddle User-Comments-App. The code in the fiddle has been modified to work on that site, don't pay attention to it, look at the example below! You can't do page refreshes on JSFiddle so I simulated it with a Refresh Page button and a little timer function that clears the list then repopulates it from local storage.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<!-- calls this function on refresh to pull any coments from local storage -->
<body onload="populateUL()">
<div>
<input type="text" name="comments" placeholder = "Your comment goes here .. " class = "sug-box" id = "UserComment">
<button class = "send-box" onclick="parseUserComment()">Add</button><i class="fa fa-send-o"></i>
<p id = "t"></p>
</div>
<div id="comment-container">
<ul>
<!-- <li> items will be inserted here -->
</ul>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript
var commentUL = document.getElementById('comment-container').firstElementChild;
var commentNumber = 0;
function parseUserComment() {
var userComment = document.getElementById("UserComment").value;
storeUserComment(userComment, commentNumber);
displayUserComment(userComment);
commentNumber++;
}
function displayUserComment(userComment) {
var li = document.createElement('li');
li.textContent = userComment;
commentUL.appendChild(li);
}
function storeUserComment(userComment, commentNumber) {
window.localStorage.setItem(`comment-${commentNumber}`, userComment);
}
function populateUL() {
if (window.localStorage.length > 0) {
var i;
for (i = 0; i < localStorage.length; i++) {
var userComment = window.localStorage.getItem(`comment-${i}`);
displayUserComment(userComment);
}
// we need to reset the counter to begin in the last element of the array when we refresh the page.
commentNumber = localStorage.length;
}
}
以下是发生的情况的简要分类，如果您有任何疑问或不清楚的地方，请告诉我.
Here's a brief breakdown of what's going on, let me know if you have any questions or if something is unclear.
代码说明
当用户单击添加"按钮时，parseUserComment()函数将运行.此功能负责将注释存储在本地存储中，并在屏幕上显示注释.您会注意到，我们将显示注释并将注释存储到帮助程序函数storeUserComment()和displayUserComment()的工作. parseUserComment()实际上唯一要做的就是获取用户的注释并增加计数器的commentNumber:
When the user clicks the 'Add' button, the parseUserComment() function will run. This function takes care of storing the comment in local storage, and displaying the comment on the screen. You'll notice that we pass the work of displaying the comment and storing the comment on to helper functions storeUserComment() and displayUserComment(). The only thing that parseUserComment() actually does is get the user's comment and increment the counter commentNumber:
var commentNumber = 0;
function parseUserComment() {
var userComment = document.getElementById("UserComment").value;
storeUserComment(userComment, commentNumber);
displayUserComment(userComment);
commentNumber++;
}
因此，我们有了用户的注释，然后将userComment传递给帮助程序函数storeUserComment，这只是一个使用命名约定'comment- {commentNumber}'将注释添加到本地存储的单个函数调用.这意味着第一条评论将为评论0"，第二条评论为评论1".我们像数组一样使用基于0的系统.请注意，使用模板文字可以使我们轻松地将commentNumber连接到字符串:
So, we have the user's comment, and we pass along the userComment to the helper function storeUserComment, which is just a single function call that add's the comment to local storage, using a naming convention 'comment-{commentNumber}'. This would mean the first comment would be 'comment-0', the second 'comment-1'. We use the 0-based system like in arrays. Note the use of template literals to allow us to easily concatenate the commentNumber to the string:
function storeUserComment(userComment, commentNumber) {
window.localStorage.setItem(`comment-${commentNumber}`, userComment);
}
存储用户评论后，我们要显示它.并且此功能还将用于在页面刷新时显示用户评论.我们只需创建一个新的"li"元素，然后使该元素的文本内容成为userComment.然后，我们将该元素添加到位于div.comment-container内部的"ul"中，使用appendChild()方法在文件的开头选择了该元素:
After we have stored the user comment, we want to display it. And this function will also be used to display the user comments on a page refresh. We simply create a new 'li' element, and then make that elements text content the userComment. We then add this element to the 'ul' that sit's inside the div.comment-container, which we selected at the beginning of the file, using the appendChild() method:
// at beginning of file
var commentUL = document.getElementById('comment-container').firstElementChild;
function displayUserComment(userComment) {
var li = document.createElement('li');
li.textContent = userComment;
commentUL.appendChild(li);
}
因此涵盖了parseUserComment()函数及其调用的助手.接下来，我们需要查看页面刷新时如何显示用户的评论.为此，我们将一个事件侦听器添加到"onload"事件的"body"元素中:
So that covers the parseUserComment() function and the helpers it calls. Next we need to see how to show the user's comments when the page refreshes. For this, we add an event listener to the 'body' element for the 'onload' event:
<body onload="populateUL()">
populateUL()函数将检查本地存储中是否有任何项目，如果有，它将遍历这些项目并为每个项目调用displayUserComment()函数:
The populateUL() function will check to see if there are any items in local storage, and if so, it will loop through those items and call the displayUserComment() function for each item:
function populateUL() {
if (window.localStorage.length > 0) {
var i;
for (i = 0; i < localStorage.length; i++) {
var userComment = window.localStorage.getItem(`comment-${i}`);
displayUserComment(userComment);
}
// bottom of function left off for clarity
在函数的结尾，我们必须确保将commentNumber设置为localStorage数组的长度，该数组将是最后一个元素.因此，如果您在localStorage中有两个注释，则将具有"comment-0"和"comment-1". localStorage的长度为2.我们将在循环中打印出'comment-0'和'comment-1'，然后'i'变量将增加为2，并且循环将停止.在这一点上，我们可以将localStorage的长度分配给commentNumber，这样，如果用户想要添加新的注释，它将从2("comment-2")开始编号:
At the end of the function, we have to be sure to set the commentNumber to the length of the localStorage array, which would be the last element. So, if you had two comments in localStorage, you would have 'comment-0' and 'comment-1'. The length of localStorage would be 2. We would print out 'comment-0' and 'comment-1' in the loop, then the 'i' variable would increment to 2, and the loop would stop. At this point, we can assign the length of localStorage to the commentNumber, so that if the user wanted to add a new comment, it would start numbering at 2 ('comment-2'):
commentNumber = localStorage.length;
这篇关于如何保持用户输入的内容打印?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
