Q&A
今起きている現象はわかりましたが、どういう動作が欲しいのですか？
html
1<body> 2 <div index="data1" onclick="save(this)">1</div> 3 <div index="data2" onclick="save(this)">2</div> 4 <div index="data3" onclick="save(this)">3</div> 5 <div index="data4" onclick="save(this)">4</div> 6<script> 7</script> 8</body>
javascript
1 //<script> 2 var save_file={"data1":{},"data2":{},"data3":{},"data4":{}}; 3 var save_data={"hp":100,"name":"aaaa","num":""}; 4 var num=0;//何回目か数える 5 6 function save(index){ 7 console.log(save_data); 8 save_data["num"]=num; 9 var index_data=index.getAttribute("index");//divのindex属性でどこにデータをセーブさせるか決めさせる 10 console.log(index_data); 11 12 save_file[index_data]=save_data;/ここで格納 13 14 console.log(save_file);//しかし二回目以降は前回入れた値もキーが違うのに上書きされてしまう 15 num++; 16 } 17 //</script>
1回目で「1」のdiv要素をクリックすると...
最後の
javascript
1console.log(save_file);
では
{data1: {…}, data2: {…}, data3: {…}, data4: {…}} data1: {hp: 100, name: "aaaa", num: 0} data2: {} data3: {} data4: {} __proto__: Object
と出力される
しかし2回目で「2」のdiv要素をクリックすると
{data1: {…}, data2: {…}, data3: {…}, data4: {…}} data1: {hp: 100, name: "aaaa", num: 1} data2: {hp: 100, name: "aaaa", num: 1} data3: {} data4: {} __proto__: Object
と出力され、1回目のdata1のnum:0が2回目のdata2のnum:1と同じ値に上書きされている。
なぜこうなるのか分からない
【補足】
javascript
1 save_file["data1"]={"a":"a","b":"b"}; 2 save_file["data2"]={"c":"c","d":"d"}; 3 save_file["data1"]={"e":"e","f":"f"}; 4 console.log(save_file);
を実行すると
{data1: {…}, data2: {…}, data3: {…}, data4: {…}} data1: {e: "e", f: "f"} data2: {c: "c", d: "d"} data3: {} data4: {} __proto__: Object
問題なくこう表示された。
このように別々のキーに保存する法王はないだろうか？
出力されるコンソールログが
```
{data1: {…}, data2: {…}, data3: {…}, data4: {…}}
data1: {hp: 100, name: "aaaa", num: 0}
data2: {hp: 100, name: "aaaa", num: 1}
data3: {}
data4: {}
__proto__: Object
```
となり、選択されたdivタグによって別々のキーに値が保存される動作にしたいです。
回答1件
0
ベストアンサー
save_dataという同じオブジェクトを代入しているので、全部同じになります。
投稿2021/06/29 23:50
総合スコア146018
つまりどこをどう書き換えればいいのでしょうか？
オブジェクトの中にオブジェクトは入れれないということですか？
配列の中に配列は代入できないということですか？
たとえ添え字をちゃんと指定していても
> つまりどこをどう書き換えればいいのでしょうか？
毎回新しいオブジェクトを作って、それをsave_fileの要素として代入しましょう。
function save(index){
console.log(save_data);
save_data["num"]=num;
var index_data=index.getAttribute("index");//divのindex属性でどこにデータをセーブさせるか決めさせる
console.log(index_data);
var save_data2={};
save_data2=save_data;
save_file[index_data]=save_data2;/ここで格納
console.log(save_file);//しかし二回目以降は前回入れた値もキーが違うのに上書きされてしまう
num++;
}
格納させるsave_dataとはまた違う空の配列(save_data2)を作ってsave_fileに格納すればいいということですね？
ありがとうございます。
> 格納させるsave_dataとはまた違う空の配列(save_data2)を作ってsave_fileに格納すればいいということですね？
上のコードでもそうなっていません。save_data2=save_data;としているので、変数は変わってもオブジェクトは同じものです。
つまり、save_dataの中身をforなどで一つずつ取り出して空のsave_data2に代入するということですか？
さっきのコードも実行してみると、ダメでした...。
function save(index){
console.log(save_data);
save_data["num"]=num;
var index_data=index.getAttribute("index");
console.log(index_data);
var save_data2=new Object;
for(let i=0;i<Object.keys(save_data).length;i++){
save_data2[Object.keys(save_data)[i]]=save_data[Object.keys(save_data)[i]];
}
save_file[index_data]=save_data2;
console.log(save_file);
num++;
}
こうしたらうまく動きました。
お世話になりました。
本当にありがとうございます。
> つまり、save_dataの中身をforなどで一つずつ取り出して空のsave_data2に代入するということですか？
それでもいいですが、Object.assignや{...save_data}などでコピーも可能です。
まだ知らないことが多いですね！！
もっと勉強します！！
あなたの回答
tips
プレビュー
