JavaScriptの変数名と中身の違い

変数名の見た目が一緒でも中身が異なることはあるのですか？
JS初心者です。
var_dumpみたいな関数がわからなかったので変数の中身の詳細がわかりませんでした。

html
1
2<body>
3
4<button id="btn10" value="A"></button>
5<button id="btn20" value="B"></button>
6
7</body>

JavaScript
1
2var btn10 = document.getElementById("btn10");
3var btn20 = document.getElementById("btn20");
4
5btn10.onclick = change;
6btn20.onclick = change;
7
8function change(){
9  var id = this.id;
10  var splitID = id.split('');
11
12  if (splitID[3] === '1'){
13    var num = parseFloat(splitID[3]) + 1;
14  } else {
15    var num = parseFloat(splitID[3]) - 1;
16  }
17  var copy = 'btn' + num + '0';
18      copy = copy.value;
19
20  this.textContent = copy;
21}

どちらかボタンを押すと、もう片方のvalueが表示されるようにしたいのですが、copy.valueでは上手く取得できません。
実験で、

JavaScript
1var copy = 'btn' + num + '0';
2    //copy = copy.value;
3
4this.textContent = btn10 + copy;

としてbtn20を押してみると　[objectHTMLButtonElement]btn10　と表示されました。

普通にbtn10と書くのと、'btn' + copy + '0' と書くのは違うのですか？
雰囲気では違う気がするのですが、（'btn' + copy + '0' はただの文字列でなにも意味を持っていない？）同じように扱う方法が知りたいです。

わからない部分だけ抜き出し、見やすいようにid,valueを書き換えたので意味不明なところがあったら教えてください。

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

回答3件

ベストアンサー

'btn' + copy + '0' はただの文字列でなにも意味を持っていない？

はい、そのとおりです。

同じように扱う方法が知りたいです。

「ローカルな変数名を名前から参照する」というのは、そもそも発想が間違っています。あとから名前で参照したいのであれば、オブジェクトに入れておきましょう。

投稿2019/12/20 02:58

maisumakun

総合スコア145975

ちょっとなにをしたいか完全にはわかりませんが
「もう片方」というならクラスでグルーピングしてください

投稿2019/12/20 04:50

yambejp

総合スコア116694

yambejp

2019/12/20 04:52 編集

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

どちらかボタンを押すと、もう片方のvalueが表示されるようにしたい

イベントリスナの引数に、event を追加して、console.log() で確認してください。
イベントに関連した情報が伝搬されていることを確認できます。

例えば、event.typeはclickとなっているはずです。
また、event.target はイベントの発生源（要素）です。

イベントリスナの中では、このeventの情報を用いて処理を切り分けることができます。

javascript
1
2// btn10.onclick = change;
3// btn20.onclick = change;
4btn10.addEventListener("click", onchange);
5btn20.addEventListener("click", onchange);
6
7function change( event ){
8
9  console.log( event ); // event 伝搬された情報
10  console.log( event.target );
11  console.log( event.target.id );
12
13  /* omitted */
14}