質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.25%

  • JavaScript

    11798questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 381

portfolio

score 5

前提・実現したいこと

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>

該当のソースコード

<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>

試したこと

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

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

より詳細な情報

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/12/15 03:51

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

    キャンセル

  • portfolio

    2017/12/15 05:32

    変更しました。

    キャンセル

  • kei344

    2017/12/15 05:57

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

    キャンセル

回答 4

checkベストアンサー

+6

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


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

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

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

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

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

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

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

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


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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/16 03:18

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

    キャンセル

  • 2017/12/16 11:48

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

    ただし、統一性の観点から、この場合は全角空白を使うべきではないと私は思います。
    変数名に英語を使っていて、インデントだけ全角空白を使う理由がないからです。
    逆に変数名に日本語を使っているのなら、インデントに全角空白を使っても良いと思います。

    キャンセル

  • 2017/12/17 02:13

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

    キャンセル

  • 2017/12/17 08: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-にヒットしたんですね(’’;
    回答文を取り込んで反映しておきます。

    キャンセル

+4

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/16 03:28

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

    キャンセル

+3

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

<script>
function reset() {
  var reset_target = document.getElementById('text');
  reset_target.value = '';
}
window.onload = function () {
  var btn = document.getElementById('reset');
  try{
    btn.addEventListener('click', function () {
      reset();
    },false);
  }catch(e){
    btn.onclick=function () {
      reset();
    };
  }
};
</script>
<textarea id="text">hogehogehgoe</textarea>
<input type="button" value="reset" id="reset">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/16 03:31

    相当古い環境だと思います。
    Windows Vistaなので。SafariとOperaの最新バージョンとIE7でやってます。
    しんどいです。

    キャンセル

+1

ちょっと主題と離れて申し訳ないですが、「空にする」という要件で
javascript使う以外に「初期状態が空である」という前提であれば
type=resetという手はないわけでは、ないですが。

いずれにしてもjavascript使った方が確実ですね^^;

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

ただいまの回答率

91.25%

関連した質問

  • 解決済

    JavaScript ランダム表示に合わせて詳細の表示

    質問を見ていただいてありがとうございます。 前提・実現したいこと 前提 HTML&CSS,JavaScriptで乱数に合わせて表示が変わるボタンを作成しました。 (下記

  • 解決済

    3分タイマー ストップボタンを押しても止まらないです。

    三分タイマーですがストップボタンを押しても止まらないです。 次にリセットボタンを押すと自動的に3分からカウントが始まります。 リセットボタンを押すと表示はカウントしないで3

  • 解決済

    javascriptでおみくじ+cookie実装

    症状 HTMLとjavascriptでおみくじ+cookieの実装を試みています。 ネットで見つけたソースをカスタマイズして実装してみたのですが、 現状のソースですと、お

  • 解決済

    javascriptで入力した文字にリンクを付けたい

    javaScriptで、以下の機能を持つプログラムを作成しようとしています。 ・テキストボックス1にサイトのURLを入力 ・テキストボックス2に適当な文字を入力 ・ボタン

  • 解決済

    javascriptで複数あるclassに同じイベントを行わせたい

    下記の場合、jQueryでは実現ができますが javascriptではどのように行うのでしょうか? <button class="btn aaa">ボタン</button>

  • 解決済

    javascript removeが効かない問題

    現在、htmlとjavascriptで、コメントフォームを作っています。 作成にあたって問題が発生したので、その原因と対策法をうかがいたく、質問させていただきます。 まず、下の

  • 解決済

    js カウントダウンタイマーの表示

    初心者です。 jsで3分のカウントダウンタイマーを作り、3分経過後に’TIME UP!’と表示させたいです。 スタート、ストップ、リセットは正常に動くのですが、スタート後残り1秒に

  • 解決済

    関数の定義と呼び出しの記述について

    実現したいこと スタートボタンを押すとpairsで定義した全ての枚数のカードが裏返しになる。 現状 スタートボタンを押しても何も変化なし。 ソースコード html <!

同じタグがついた質問を見る

  • JavaScript

    11798questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。