javascriptが読み込まれない？

前提・実現したいこと

以下の記事を参考にhtml, css, javascriptを使ってCSSアニメーションを実行したいと思いました。

https://qiita.com/Yametaro/items/6a24631687dca63c611a?fbclid=IwAR1_0S8i176eboIW-T3kOlpT11esLA3XlCPfI6DMHHKfLFlPKdVDLJa4g8Y

発生している問題

index.htmlをブラウザ(safari, Chorome)で開いても真っ白。
読み込まれてないのではないか。

該当のソースコードとディレクトリ構成

以下のindex.html, sample_js.js, style.cssをプロジェクトフォルダ直下に置いています。

index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Document</title>
5    <meta charset="UTF-8">
6    <link rel=”stylesheet” href=”style.css”>
7    <script src=”sample_js.js”></script>
8</head>
9<body>
10    <div class="box"></div>
11</body>
12</html>

sample.css

css
1.box {
2  background-color: aqua;
3  height: 30px;
4  width: 30px;
5  transition: 200ms;
6}

sample_js.js

js
1const box = document.querySelector(".box");
2
3function* fuwafuwa () {
4  let boxHeight = 30;
5  let boxWidth = 30;
6    
7  while (boxHeight < 300) {
8    boxHeight += 30;
9    box.style.height = boxHeight + "px"
10    yield;
11  
12    boxWidth += 30;
13    box.style.width = boxWidth + "px"
14    yield;
15  }
16}
17
18const generator = fuwafuwa();
19
20box.addEventListener("transitionend", () => generator.next());
21
22box.addEventListener("click", () => generator.next());
23

何が原因かわかる方いらっしゃいますか？

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

回答2件

<link rel=”stylesheet” href=”style.css”>

ダブルクォーテーションが全角になっています。
「括る」のであれば半角である必要があります。そうでないと”sample_js.js”という１つの集合体として扱われます。

ブラウザ開発ツールのコンソールにエラーが出ていないかも確認してみてください。

index.htmlをブラウザ(safari, Chorome)で開いても真っ白。

今後の問題切り分けの方法として下記は置いておいてください。
0. htmlになんでもいいので文字が表示されるようにしておく
0. jsファイル冒頭でconsole.log(1);と書いてブラウザの開発ツールのコンソールを確認する（学習期、開発期は常に起動しておいても良いくらいです）
0. cssはbodyにbackground-colorなどを指定して「ひと目でわかる」変化を入れておく

投稿2019/09/06 03:51

編集2019/09/06 03:54

m.ts10806

総合スコア80850

yoshinavi

2019/09/06 04:23

エディターにも寄りますが、コードが色分けされて、気付き易いモノにすると、この手の間違いは少なくなるかと思いますね。

m.ts10806

2019/09/06 05:07 編集

そうですね。ただ直前のmetaタグ内とか後のdivでは正しく使えているのでそことの明らかな違いには気づいてもらいたいところ

quiquibro

2019/09/06 08:48

qiitaを見ながらvimでやってたので全角・半角の見落としをしていました。また、コードに書いておくことや開発ツールなど、これからの勉強におけるアドバイスにもなりました。ありがとうございました。

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

自己解決

ブラウザの開発コンソールを開くと、2つのエラーメッセージが出ていました。
一つ目は、ご指摘にあったダブルクォーテーションが全角になっていたためのもの。
二つ目は、addEventListener()でnullが返っていたことによるもの。
この　二つ目のエラーは、エラーメッセージで検索したらすぐに解決が出てきて、jacascriptの読み込みを<head>タグではなく、<body>内のid="box"とした<div>以降に記述することで解決できました。

投稿2019/09/06 08:44

quiquibro

総合スコア6