JavaScriptのコードについて間違いを指摘してください。

###前提・実現したいこと
JavaScriptの教則本の例題通りに打ち込んでいますが、自分では見つけられない間違いがあるので指摘お願いします。
「リセットボタンを押すとテキストエリア内の文字が消える」
を実現したいです。

###発生している問題・エラーメッセージ

リセットできない。

###該当のソースコード

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Lesson2 Sample Script</title> <script> //ここにスクリプトを記述 //テキストエリアを空にする関数　function reset() { //リセット対象の要素を取得する　var reset_target = document.getElementById('text'); reset_target.value = ''; }

//HTMLの読み込みと表示が終了したらボタンにリセットの機能を付与する
window.onload = function () {
//ボタン要素を取得する
var btn = document.getElementById('reset');

//ボタンにアクションを追加する
btn.addEventListener('click', function () {
//ボタンがクリックされたらreset関数を実行する
reset();
},false);
};
</script>

</head> <body> <textarea id="text" style="width:200px; height: 100px;"></textarea> <P> <input type="button" id="reset" value="reset" /> </p> <div id="container"> <p>dog</P> </div> </body> </html>

###該当のソースコード

JavaScript
1<script>
2   //ここにスクリプトを記述
3   //テキストエリアを空にする関数
4　function reset() {
5   //リセット対象の要素を取得する
6　var reset_target = document.getElementById('text');
7  reset_target.value = '';
8 }
9
10   //HTMLの読み込みと表示が終了したらボタンにリセットの機能を付与する
11　window.onload = function () {
12   //ボタン要素を取得する
13　var btn = document.getElementById('reset');
14
15   //ボタンにアクションを追加する
16　  btn.addEventListener('click', function () {
17    //ボタンがクリックされたらreset関数を実行する
18　　reset();
19   },false);
20  };
21</script>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/12/14 18:51

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

portfolio

2017/12/14 20:32

変更しました。

kei344

2017/12/14 20:57

https://teratail.com/questions/104888 この質問と同じ内容ですね。こちらの質問は運営にコンタクトを取り、削除されることをお勧めします。https://teratail.com/contact/input

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

回答4件

ベストアンサー

1, 3, 8, 10, 13, 15行目のインデントが全角スペースです。
他は特に見当たりませんでしたので、全角スペースを取り払った後に一度確認してみてください。

JavaScriptでもそうですが、大多数の言語は全角スペースが含まれていると構文エラーになります。
全角スペースの色を変える設定や薄く記号で知らせてくれる機能があると思うので設定してください。
えっ、ない？ AtomかVS Codeあたりを使って下さい。

【追記】 think49さんの情報提供

ES3 当時から全角スペースはエラーにならない仕様です。

ECMAScript では「Unicode空白文字」を扱える為、全角空白も許容される仕様となっています。
ただし、IE8- はこの仕様に準拠していなかった為、コード中に全角空白を含むとエラーになりました。
その為、「JavaScript では全角空白を使えない」という誤解が広まっているのだと思います。
現在のモダンブラウザ(IE9+ もOK)では全角空白を問題なく扱えると思います。

というわけで調査しました。
確かにJavaScriptの仕様では、全角スペースもホワイトスペースとして取り扱われます。
参考サイト: 【JavaScript】全角スペースは使ってよい（仕様では） - SOFTELメモ

Node.jsで下記のコードを読み込ませても正常動作し、3という数値が出力される事を確認しました。

JavaScript
1for　(var　i　=　0;　i　<　10;　i++)　{
2　if　(i　===　3)　{
3　　console.log(i);　// 行末全角スペース
4　}
5}

コードを修正したところOperaとSafariでは動作しました。IE7では動作しませんでした。OSは関係あるのかわかりませんがVISTAです。

たまたまサポート対象外の古いブラウザが構文エラーになって、
私の勘違いにハマって解決した形になったようです(´・ω・`)

また、質問文のコードはインデントが綺麗に整っておらず、
行の先頭からスペースが1個だったり3個だったりと悲惨な状態です。

ソースコードのインデントルールは色々派閥がありますが、ファイル内で確実に統一させて下さい。
候補は下記です。

半角スペース2個
半角スペース4個
タブ記号

殆どのテキストエディタでは
タブを押した時の挙動としてスペース2個、4個、タブ記号を挿入する設定があります。
（ソフトタブという設定で存在するでしょう）

また、改行時に前の行と同じインデント幅でインデント出来る設定も存在し、
Tabキーでインデント、Shift + Tabキー等でアンインデントが出来るエディタも多くあります。
これのお陰でインデントの面倒なルールを徹底しながら、ケアレスミスで間違える事なく何百行ものコードを書けるわけです。是非。

投稿2017/12/15 00:27

編集2017/12/16 23:35

miyabi-sun

総合スコア21158

portfolio

2017/12/15 18:18

うおーできました！ terapadを使っています。設定でスペースを見えるようにしました。とてもわかりやすくなりました。ありがとうございます。

think49

2017/12/16 02:48

> JavaScriptでもそうですが、大多数の言語は全角スペースで構文エラーになります。 ES3 当時から全角スペースはエラーにならない仕様です。 ECMAScript では「Unicode空白文字」を扱える為、全角空白も許容される仕様となっています。ただし、IE8- はこの仕様に準拠していなかった為、コード中に全角空白を含むとエラーになりました。その為、「JavaScript では全角空白を使えない」という誤解が広まっているのだと思います。現在のモダンブラウザ(IE9+ もOK)では全角空白を問題なく扱えると思います。ただし、統一性の観点から、この場合は全角空白を使うべきではないと私は思います。変数名に英語を使っていて、インデントだけ全角空白を使う理由がないからです。逆に変数名に日本語を使っているのなら、インデントに全角空白を使っても良いと思います。

portfolio

2017/12/16 17:13

とてもためになりました。ありがとうございます。

miyabi-sun

2017/12/16 23:36 編集

> think49さんありがとうございます。 IE6以降対応だった時代にやらかして以来すっかり勘違いしていました。下記のコードを用意して、念のため`:s/^v /　/g`でスペースを全て用意して使用してNode.jsで実行してみたところ、正常動作することを確認しました。 ``` for　(var　i　=　0;　i　<　10;　i++)　{ 　if　(i　===　3)　{ 　　console.log(i);　// ここに行末全角スペース　} } ``` 確かにNode.jsに読み込ませた場合、全角スペースも何時いかなる状況下で使用してもホワイトスペースとして取り扱われる事を確認しました。 > コードを修正したところOperaとSafariでは動作しました。IE7では動作しませんでした。OSは関係あるのかわかりませんがVISTAです。たまたまIE8-にヒットしたんですね（’’；回答文を取り込んで反映しておきます。

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

あなたのコードをそのままjsFiddleに持っていったところ、ちゃんとリセットされました。
https://jsfiddle.net/4mtk545L/

私のデスクトップにコードをまるごと保存しても同様に動作しました。

どんな環境でテストされていますか？

投稿2017/12/15 00:37

masaya_ohashi

総合スコア9206

portfolio

2017/12/15 18:28

コードを修正したところOperaとSafariでは動作しました。IE7では動作しませんでした。OSは関係あるのかわかりませんがVISTAです。

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

相当古い環境でやっていることはないですか？これならどうでしょう？

javascript
1<script>
2function reset() {
3  var reset_target = document.getElementById('text');
4  reset_target.value = '';
5}
6window.onload = function () {
7  var btn = document.getElementById('reset');
8  try{
9    btn.addEventListener('click', function () {
10      reset();
11    },false);
12  }catch(e){
13    btn.onclick=function () {
14      reset();
15    };
16  }
17};
18</script>
19<textarea id="text">hogehogehgoe</textarea>
20<input type="button" value="reset" id="reset">