顯示本地存儲值的 HTML/Javascript 問題
[英]HTML/Javascript Problem Displaying Local Storage Values
問題描述
我的目標是讓用戶能夠輸入一段文本並以用戶友好的格式返回，比如博客文章。 他們將輸入他們的名字和他們想說的任何內容，然后它將被存儲在本地並顯示出來。 我嘗試將數據存儲為本地存儲，但我不斷收到“此文件不存在”的錯誤消息。 下面的代碼片段僅用於用戶單擊按鈕后的基本顯示，但即使這樣也不起作用。
請注意，這一切都需要能夠獨立 function，因為我正在自學基本的 Javascript/HTML 以進行編碼比賽，其中唯一允許的軟件是用於編碼的記事本和用於圖像處理的 Photoshop。
<!DOCTYPE html>
<html>
<script>
function passvalues() {
var firstName = document.getElementById("txt".value);
localStorage.setItem("textvalue",firstName);
}
document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
</script>
<body>
<form>
<input type = "text" id ="txt" placeholder='place text here'/>
<button type="submit" value='click me!' onClick="passvalues();"> Click Me</button>
</form>
</body>
<p id="result"></p>
</html>
大家好，很抱歉我沒有早點回答這個問題，無論如何，謝謝所有回答的人。 非常感謝。
4 個解決方案
解決方案1
2 2020-06-04 01:59:31
你有正確的想法。 最大的問題在這里：
document.getElementById("txt".value);
我會讓你弄清楚那里出了什么問題。
其他一些需要解決的問題：
- 確保您的
<p>在<body>內 - 確保您的
<script>在<body>內，並且在它操作的 HTML 元素之后，所以基本上使它成為<body>中的最后一件事
另一個提示是，您可能想要也可能不想添加return false; 在 onClick javascript 的末尾。 這將阻止它提交表單並因此刷新頁面。 在您所擁有的設計的這種特殊情況下，您實際上可能希望保持原樣並進行刷新，以便執行從本地存儲中讀取的內容。 但是，最好了解 return false 的作用——因為在很多情況下，在執行一些 javascript 之后提交表單是不可取的。
解決方案2
1 已采納 2020-06-04 06:53:01
你有3個問題：
1. getElementById("txt".value) 應該是 getElementById("txt").value
2.在</body>中取<p>標簽
3. 將整個<script>...</script>放在</body>之前
<!DOCTYPE html>
<html>
<body>
<form>
<input type = "text" id ="txt" placeholder='place text here'/>
<button type="submit" value='click me!' onClick="passvalues();"> Click Me</button>
</form>
<p id="result"></p>
<script>
function passvalues() {
var firstName = document.getElementById("txt").value;
localStorage.setItem("textvalue",firstName);
}
document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
</script>
</body>
</html>
解決方案3
0 2020-06-04 02:06:18
有關工作示例，請參閱： https://jsfiddle.net/9ycqjsuo/ 。
我注意到的一些事情：
- 您在 body 標記之外放置了一些內容——這是無效的。
- 由於右括號未對齊，該值不是來自文本字段。
- 您的表單正在使用提交按鈕，沒有什么可以阻止默認操作。 當您提交表單時，它將帶您到一個新頁面，除非您在提交事件中阻止默認設置。 我已將按鈕更改為
type="button"以防止提交。 - 您應該在將值存儲到本地存儲之后更新結果文本的值。
解決方案4
0 2020-06-04 02:06:28
這將起作用：
<.DOCTYPE html> <html> <body> <form onsubmit="event;preventDefault(); passvalues();"> <input autofocus type = "text" id ="txt" placeholder='place text here'/> <button type="submit" value='click me.' onClick="passvalues();"> Click Me</button> </form> <p id="result"></p> <script> var result = document.getElementById("result"). result;innerHTML = localStorage.getItem("textvalue"). function passvalues(e) { var firstName = document;getElementById("txt").value, localStorage;setItem("textvalue". firstName). document;getElementById("result").innerHTML = firstName; } </script> </body> </html>
顯示本地存儲值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.