【javascript】変数の代入について

下記のjavascriptは

「【1】ローカルストレージ(　key= usercom　/ value= idname, passname) に保管されたデータをテキストボックス
<input type="text" id="value1" name="idname" value=""/><BR>
<input type="text" id="value2" name="passname" value=""/><BR>
に入れること」

および

「【2】外部のホームページである
https://example.com/data.php?idname=1234　にあるID=1234のデータを取得し、

<div id="page_contents"></div> にて表示する」

という2つのことを同時に行うことが可能です。

【やりたいこと】

下記のjavascriptでは「data.php?idname=1234」の部分は固定値でした。
このidname=1234 の1234を変数とし、ローカルストレージに保管されたデータ(value= idname) を引き出して使用したいと考えております。

【試したこと】
<input type="text" id="value1" name="idname" value=""/><BR>
には、ローカルストレージに保管されたデータが記載されます。
その変数は、
var idname = (didname.innerHTML);　として取得しています。

従い、
xmlHttp.open("GET", "https://example.com/data.php?idname=1234", true);

の部分を

xmlHttp.open("GET", "https://example.com/data.php?idname="+idname+"", true);

とすれば取れると考えました。

結果
index.html:176 Uncaught ReferenceError: idname is not defined
at window.onload (index.html:176)

というエラーが出て取れません。

xmlHttp.open("GET", "https://example.com/data.php?idname="+Values_idname+"", true);

としても同様です。認識してくれません。

どうすれば表示できるようになりますでしょうか?

よろしくお願いいたします。

javascript
1
2<!DOCTYPE html>
3<html lang=”ja”>
4<head>
5<meta charset=”utf-8″>
6<title>テスト</title>
7<script type="text/javascript" src="./js/jquery.js"></script>
8<script type="text/javascript" src="./js/jquery.xdomainajax.js"></script>
9</head>
10<body>
11
12<script>
13window.onload=function(){
14var readbtn = document.getElementById("read");
15if (!window.localStorage) {
16    restext.innerHTML = "web Storageに対応しておりません。";
17    return;
18}
19display(); 
20
21//表示する処理
22function display() {
23    //ローカルストレージのデータを取得する
24    var d = JSON.parse(window.localStorage.getItem("usercom"));
25    var dl = document.createElement("dl");
26    dl.id = "resdata";
27    document.getElementById("res").appendChild(dl);
28
29    var didname = document.createElement("didname");
30    var dpassname = document.createElement("dpassname");
31
32    document.getElementById("resdata").appendChild(didname);
33    document.getElementById("resdata").appendChild(dpassname);
34    didname.innerHTML = d.idname;
35    dpassname.innerHTML = d.passname;
36var idname = (didname.innerHTML);
37var Values_idname = idname;
38　　$("[name='idname']").val(Values_idname); 
39
40var passname = (dpassname.innerHTML);
41var Values_passname = passname;
42　　$("[name='passname']").val(Values_passname); 
43
44};
45
46
47    //example.com/data.phpにあるID=1234のデータを取得する
48
49
50  xmlHttp = new XMLHttpRequest();
51  xmlHttp.onreadystatechange = checkStatus;
52
53  xmlHttp.open("GET", "https://example.com/data.php?idname=1234", true);
54
55  xmlHttp.send(null);
56//}
57
58function checkStatus(){
59  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
60//    alert(xmlHttp.responseText);
61
62 var data = xmlHttp.responseText;                       // Ｅ
63
64document.getElementById("page_contents").innerHTML = data; 
65
66  }
67}
68}        
69</script>
70
71<BR>
72<input type="text" id="value1" name="idname" value=""/><BR>
73
74<input type="text" id="value2" name="passname" value=""/><BR>
75<div id="res"></div>
76
77      <!-- Ｈ -->
78<div id="page_contents"></div>    
79
80</body>
81</html>
82
83
84

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

回答3件

ベストアンサー

問題がわかりにくくなるので、インデントをつけましょう。
また、全角と半角の空白が区別できるエディタを使いましょう。
「JavaScript スコープ」で検索するか、入門書を読みましょう。

js
1window.onload = function() {
2    var readbtn = document.getElementById("read");
3    if (!window.localStorage) {
4        restext.innerHTML = "web Storageに対応しておりません。";
5        return;
6    }
7    display();
8
9    var idname;
10    //表示する処理
11    function display() {
12        //ローカルストレージのデータを取得する
13        var d = JSON.parse(window.localStorage.getItem("usercom"));
14        var dl = document.createElement("dl");
15        dl.id = "resdata";
16        document.getElementById("res").appendChild(dl);
17
18        var didname = document.createElement("didname");
19        var dpassname = document.createElement("dpassname");
20
21        document.getElementById("resdata").appendChild(didname);
22        document.getElementById("resdata").appendChild(dpassname);
23        didname.innerHTML = d.idname;
24        dpassname.innerHTML = d.passname;
25        idname = d.idname;
26        $("[name='idname']").val(d.idname);
27/*　全角の空白が混じっている*/
28        $("[name='passname']").val(d.passname);
29
30    };
31
32
33    //example.com/data.phpにあるID=1234のデータを取得する
34
35
36    xmlHttp = new XMLHttpRequest();
37    xmlHttp.onreadystatechange = checkStatus;
38
39    xmlHttp.open("GET", "https://example.com/data.php?idname="+idname, true);
40
41    xmlHttp.send(null);
42    //}
43
44    function checkStatus() {
45        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
46            //    alert(xmlHttp.responseText);
47
48            var data = xmlHttp.responseText; // Ｅ
49
50            document.getElementById("page_contents").innerHTML = data;
51
52        }
53    }
54}

【Online JavaScript beautifier】
http://jsbeautifier.org/

投稿2018/01/08 02:00

kei344

総合スコア69400

tajix_japan

2018/01/08 02:29

いつもありがとうございます。出来ました。ご指導ありがとうございます。【Online JavaScript beautifier】についても教えていただきありがとうございました。これは便利です。ありがとうございます。 JavaScript スコープについても勉強してみます。本当に助かりました。深く御礼申し上げます。

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