JavaScriptのreset関数のコードの置き換えの仕方がわからない。

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
JavaScriptの教則本にしたがってreset関数のサンプルを作りました。教則本に「さらに条件分岐を追加してみましょう。コードを置き換えてください」とあるんですが、どこにコードを置き換えていいのかわかりません。また、間違いがあったら指摘お願いします。

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

表示させたいアラートが表示されない。

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

<!DOCTYPE HTML>
<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);
    if(reset_target.value == ''){
    alert('テキストはすでにリセット済みです');
  }
  else{
    reset_target.value = '';
}
  };
</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>

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

###補足情報(言語/FW/ツール等のバージョンなど)
追加したい条件分岐は次の通りで、教則本ではこれを置き換えるようにいっています。

if(reset_target.value == ''){
    alert('テキストはすでにリセット済みです');
  }
  else{
    reset_target.value = '';
}

もとのコードは次の通りです。ここに上の条件分岐を追加したいです。

<!DOCTYPE HTML>
<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>

Lhankor_Mhy

2017/12/22 00:58

この条件文はどのような動作をするものなのか、理解できていますでしょうか？

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

回答2件

教則本に従って進めたのにわからないのであれば、わかるところまで戻ってやり直したほうがいいのではないでしょうか？

クリアとリセットは概念が違います。たまたま初期値が空のため同じように見えるだけです。
さて、HTMLにはすでにtype="reset"があるので、あまり意味はないのですが、ここでは関数名通りリセットのほうをしてみましょう。

JavaScript
1// テキストエリアを空にする関数
2// ↓
3// テキストエリアをリセットする関数
4function reset() {
5  // リセット対象の要素を取得する
6  var reset_target = document.getElementById('text');
7  if(reset_target.value === reset_target.defaultValue){
8    alert('テキストはすでにリセット済みです');
9  } else {
10    reset_target.value = reset_target.defaultValue;
11  }
12}

HTMLTextAreaElement
https://developer.mozilla.org/ja/docs/Web/API/HTMLTextAreaElement

投稿2017/12/22 01:52

x_x

総合スコア13749

ベストアンサー

おそらくresetの中身をこうするように言っているのだと思います

javascript
1function reset() {
2  var reset_target = document.getElementById('text');
3  if(reset_target.value == ''){
4    alert('テキストはすでにリセット済みです');
5  }
6  else{
7    reset_target.value = '';
8  }
9}
10window.onload = function () {
11  var btn = document.getElementById('reset');
12  btn.addEventListener('click', function () {
13    reset();
14  },false);
15};
16