ページの読み込みの段階で、addEventListenerを発火

下記のソースで、「表示する」ボタン
<input id="read" name="read" type="button" value="表示する">
を押すと、
ローカルストレージ(　key= usercom　/ value= idname, passname) に保管されたデータをテキストボックス
<input type="text" id="value1" name="idname" value=""/><BR>
<input type="text" id="value2" name="passname" value=""/><BR>
に入れることが可能です。

下記は、ページの読み込みの際は、
window.onload=function(){
で、ローカルストレージにアクセスするだけに留まっており、
「表示する」ボタンを押して初めてaddEventListenerが発火し、ID、パスワードを記載します。

【やりたいこと】

ページの読み込みの段階で、addEventListenerを発火させ、「ページを読み込んだ時には自動的にテキストボックスにIDとパスワードが入っている」状態を作りたいです。

いろいろ試してみましたがうまくいきません。

どのように書き換えればいいかご教示いただきたくお願いいたします。

javascript
1
2
3<!DOCTYPE html>
4<html lang=”ja”>
5<head>
6<meta charset=”utf-8″>
7<title>http://the-zombis.sakura.ne.jp/wp/blog/2012/05/12/post-1347/</title>
8</head>
9<body>
10
11<script type="text/javascript" src="./js/jquery.js"></script>
12<script>
13window.onload=function(){
14var readbtn = document.getElementById("read");
15if (!window.localStorage) {
16    restext.innerHTML = "web Storageに対応しておりません。";
17    return;
18}
19
20//表示する処理
21readbtn.addEventListener("click", function() {
22    //保存データを表示する
23    display();
24}, true);
25
26//表示する処理
27function display() {
28    //データを取得する
29    var d = JSON.parse(window.localStorage.getItem("usercom"));
30    var dl = document.createElement("dl");
31    dl.id = "resdata";
32    document.getElementById("res").appendChild(dl);
33
34    var didname = document.createElement("didname");
35    var dpassname = document.createElement("dpassname");
36
37    document.getElementById("resdata").appendChild(didname);
38    document.getElementById("resdata").appendChild(dpassname);
39    didname.innerHTML = d.idname;
40    dpassname.innerHTML = d.passname;
41var idname = (didname.innerHTML);
42var Values_idname = idname;
43　　$("[name='idname']").val(Values_idname); 
44
45var passname = (dpassname.innerHTML);
46var Values_passname = passname;
47　　$("[name='passname']").val(Values_passname); 
48
49};
50
51}        
52</script>
53
54<input id="read" name="read" type="button" value="表示する"><BR>
55<BR>
56
57<BR>
58<input type="text" id="value1" name="idname" value=""/><BR>
59
60<input type="text" id="value2" name="passname" value=""/><BR>
61<div id="res"></div>
62</body>
63</html>
64

行動規範の内容に同意します

回答1件

ベストアンサー

js
1var readbtn = document.getElementById("read");
2if (!window.localStorage) {
3    restext.innerHTML = "web Storageに対応しておりません。";
4    return;
5}
6display();  // ADD