プルダウンで選択された内容を基に、innerHTMLとaddEventListenerでH1タグの内容を書き換えたいが、正常に動作しない

HTML
1<html>
2<head>
3</head>
4<body>
5<h1 id="asdf">TEST</h1>
6
7<select id="select">
8	<option value="1">1
9	<option value="2">2
10</select>
11
12<script>
13let Element = document.getElementById("select");
14let index = Element.selectedIndex;
15let selectedElement = Element.options[index].value;
16
17Element.addEventListener("change",function(){
18
19	let H1Element = document.getElementById("asdf");
20	if(index == 0){H1Element.innerHTML = "1!!!";}
21	else{H1Element.innerHTML = "2!!!";}
22
23},false)
24</script>
25
26</body>
27</html>

##困っていること
以上のHTMLが正常に作動しません。
プルダウンでどちらの選択肢を選んでも
H1タグの内容が常に1!!!になります。
どこがおかしいでしょうか。

Chromeの開発者ツールを使用してみましたが、とくにエラーはありませんでした。

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

回答2件

ベストアンサー

let index = Element.selectedIndex;をイベントハンドラより外側で代入しているので、これはイベントが起きても最初の値のままです。

投稿2020/12/04 06:07

maisumakun

総合スコア145963

退会済みユーザー

2020/12/04 06:35

ありがとうございます。 <script> let Element = document.getElementById("select"); Element.addEventListener("change",function(){ let index = Element.selectedIndex; let selectedElement = Element.options[index].value; let H1Element = document.getElementById("asdf"); if(index == 0){H1Element.innerHTML = "1!!!";} else{H1Element.innerHTML = "2!!!";} },false) </script> で解決できました。

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

順番の問題です

let index = Element.selectedIndex;

let selectedElement = Element.options[index].value;

の２行を

Element.addEventListener("change",function(){

の中に入れてください

投稿2020/12/04 06:36

yambejp

総合スコア116661

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

プルダウンで選択された内容を基に、innerHTMLとaddEventListenerでH1タグの内容を書き換えたいが、正常に動作しない

関連した質問