2016-10-08 11 views
1

ローカルストレージからテキストをHTMLの段落に挿入するにはどうすればよいですか?

<!-- HTML --> 
 

 
<html>  
 
<head> 
 
<title> name</title> 
 
    <link rel="stylesheet" type="text/css" href="index.css"> 
 
</head>  \t 
 
<body> 
 
    \t \t \t 
 
    <p id = "name"></p> 
 

 
    <script src = "index.js"> 
 
     var x = "Hello my name is " + localStorage.getitem("text"); 
 
     document.getElementById("name").innerHTML = x; 
 
    </script> 
 
    
 
</body>  
 
</html>

私は、ローカルストレージにいくつかのテキストを入れているし、今私は、段落に挿入することにより、HTMLによるページにそのテキストを追加したいです。たとえば、あるページにsomeonesの名前を尋ねて、それをローカルストレージに保存した後、次のページに「Hello Steve」と言うことができます。

編集:スクリプトを移動しても結果に影響はありません。その後、

のdocument.write(「

こんにちは 『+ localStorage.getItem(』テキスト 『)+』

」)

テキスト:私は使用する関数を呼び出すために使用した場合の情報は間違いなくあるため格納されています画面に表示されますが、残りの部分は読み込まれません。例えば、私がうまくいかない背景色が欲しいならば。私にとって、これはこれが他の質問の重複ではないように見えます。

+0

あなたの質問を編集して、すでに試したコードとそれが機能しない方法の説明を含めてください。また、あなたに役立つかもしれません:[私はどのように良い質問をしますか?](http://stackoverflow.com/help/how-to-ask)。 – MJH

+0

[なぜjQueryやgetElementByIdのようなDOMメソッドが要素を見つけられないのですか?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such- as-getelementbyid-not-find-the-element) –

+0

bodyタグの最後にスクリプトを移動します。 – Keith

答えて

4

コードスニペットの問題は、pタグが作成されてDOMに追加される前にスクリプトタグ内のjavascriptが実行されていることです。

<body> 
    <p id="name"></p> 
    <script type="text/javascript"> 
     var x = "Hello my name is " + localStorage.getItem("text"); 
     document.getElementById("name").innerHTML = x; 
    </script> 
</body> 

また、あなたは一般的にそのスクリプトタグなどでSRCを持っている必要はありません。

この問題を解決する最も簡単な方法は、右のこのような </body>タグの上にスクリプトタグを移動することですよくインラインのjavascriptとして。

+0

それは何もしていないようでした。本文が読み込まれたときに関数を起動してテキストを画面に追加できるので、情報が保存されています。テキストが表示されますが、本文にはHTMLは読み込まれません。お試しいただきありがとうございます。 – RomanF

+0

まず、getItemが大文字ではないことがわかりました.JavaScriptでは大文字と小文字が区別されるため、間違いなく問題になります。それ以外の場合は、上記のコードスニペットが正常に動作することを確認しました。 localStorage.setItem( "text"、 "Fred") 'をコンソールに入れ、Enterキーを押してリロードすると、「Hello my name is Fred」と表示されます。 – pixelman32

+0

まあ...それだった。私はちょうどあなたの時間を無駄にして申し訳ありません。 – RomanF