htmlのcssのスタイルを変更するボタンが機能しない（JavaScript）

比留間和也さん著『基礎から覚える、深く理解できる。JavaScriptの新しい教科書』の内容から質問したいことがございます（Lesson2 46p~47p）。

HTMLで、見出しとリストを表示して、その下に「Styleを適用」というボタンを付けました。このボタンを押すと、見出しの下に余白とボーダーが追加され、リストの項目にもボーダーが加わるはずでした。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Lesson2 Sample Script</title>
7  
8  <script>
9  window.onload = function() {
10    var contents = document.getElementById('contents');
11    contents.innerHTML = '<ul>' + '<li>List item1</li>' + '<li>List item2</li>' + '<li>List item3</li>' + '</ul>';
12    var li_element = document.createElement('li');
13    li_element.innerHTML = 'List item4';
14    var ul = document.querySelector('#contents > ul');
15    ul.appendChild(li_element);
16  };
17  var btn = document.getElementById('btn');
18
19  btn.addEventListener('click', function() {
20    var h1 = document.querySelector('.title');
21
22    h1.style.borderBottom = 'solid 1px #999';
23    h1.style.marginBottom = '40px';
24    h1.style.padding = '10px';
25
26    ul.className = 'information';
27  }, false);
28  </script>
29  
30  <style>
31  ul.information {
32    font-weight: bold;
33  }
34  ul.information li {
35    padding: 10px;
36    border-bottom: solid 1px #ccc;
37  }
38  </style>
39</head>
40
41<body>
42  <div id="container">
43    <h1 class="title">見出し</h1>
44    <div id="contents"></div>
45    <p><input type="button" id="btn" value="Styleを適用"/></p>
46  </div>
47</body>
48
49</html>

しかし、ボタンを押しても、上記のスタイルが変更されません。ボタンが正常に機能するためにはどうすれば良いでしょうか。どうかご教授ください、よろしくお願いいたします。

使用PC：MacBook Pro (13-inch, 2016, Two Thunderbolt 3 ports)
使用ソフト：Atom（テキストエディタ）

miyabi_pudding

2020/10/04 19:54 編集

btnをクリックした時、関数が実行されているかをまず確認してください。 console.logなどで確認できます。次に、h1にはスタイルが効いても、ulには効かないという現象になると思いますので、まずは、btnのクリックイベントが動作しているか、確認しましょう。

Ekito

2020/10/05 03:47

お返事ありがとうございます。コンソールで確認したところ、関数が実行できていませんでした。原因が少しずつわかってきました、ありがとうございます。

Ekito

2020/10/05 03:55

miyabi_pudding

2020/10/05 04:24

参照範囲の問題です。 ul変数は当初、 window.onloadに代入した関数内でのみの参照だったため、その外で定義したクリックイベントでは使用することができませんでした。しかし、全てをonload内に入れることによって、 ulの定義参照範囲に入るため、使用することができるので、スタイルの変更が効いたというわけです。 JavaScriptなどのプログラミングにおいては、この、参照範囲はとても重要な基礎になりますので、よくよく勉強されて下さい。

Ekito

2020/10/05 09:29

いわゆるスコープというものでしょうか。納得いたしました。ありがとうございます、励みます！

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

回答1件

ベストアンサー

クリック時にエラー出てます。（ブラウザ開発ツールのコンソールで確認できます）

Uncaught TypeError: Cannot read property 'addEventListener' of null at xxx.html:19

下記ですね。

js
1var btn = document.getElementById('btn');
2
3btn.addEventListener('click', function() {
4

getElementByIdで#btnを読み込んでますが、その処理を通ったときにHTML的に#btn自体が読み込まれていません。JavaScriptのほうが先に処理通っています。
要素が読み込まれた後に実行するようにしてください。

とりあえずwindow.onloadのfunctionの中に移動させてみては。

onload以外にもDOMContentLoaded とか、</body>の直前にJavaScript置くとか
ほかにも対処方法はあります。

投稿2020/10/04 22:33

編集2020/10/04 22:56

m.ts10806

総合スコア80875

Ekito

2020/10/05 03:57

お返事いただきありがとうございます！確かにそのようなエラーが出ておりました。処理の順番に問題があったんですね。 windows.onloadのfunctionの中に移動させたところ、スタイルの変更が適用されるようになりました。ただ</body>の直前にscriptを移動させた場合、スタイルの変更がh1のみにしか適用されませんでした。これは何故なのでしょうか？