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

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

ただいまの
回答率

89.52%

htmlのテキストボックスから値を取得する

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,311

atsushi-k

score 10

プログラムの勉強を始めて1か月の初心者です。
ドットインストールの5秒当てゲームアプリを改造しています。
目標値(target)をhtmlのテキストボックスから取得し、そのままtargetに反映させたいのですが、以下のエラーが返ってきます。

index.html:21 Uncaught ReferenceError: onButtonClick is not defined
at HTMLInputElement.onclick (index.html:21)

他のサイトを見ても書き方はあっていると思っているのですが、何が問題なのか不明です。
よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>5seconds!</title>
  <link rel="stylesheet" href="css/styles.css">

</head>
<body>
  <div class="container">
    <div id="target">0.000</div>
    <div id="result">0.000</div>
    <div class="buttons">
      <div id="start">start</div>
      <div id="stop">stop</div>
    <div id="input"></div>

    </div>
    <form name="form1" id="id_form1" action="">
      <input name="textBox1" id="id_textBox1" type="text" value="" />
      <input type="button" value="決定!" onclick="onButtonClick();" />
      <br><a>目標値を入力してください</a>
    </form>

    <script src="js/main.js"></script>
  </div>

</body>

</html>
.container{
  font-family: 'Courier New', sans-serif;
  width: 300px;
  margin: 30px auto;
  text-align: center;
  font-weight: bold;
}

#target, #result{
  font-size: 35px;
  margin-bottom: 20px;
  background: #ccc;
  height: 60px;
  line-height: 60px;
}

#result.perfect{
  background: #ff66cc;
  color: white;
}
#result.standby{
  background: #eee;
}


#start{
  float: left;
}
#stop{
  float: right;
}

#start, #stop{
  cursor: pointer;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  background: #efefef;
  width: 140px;
  box-shadow: 0px 5px #ccc;
  border-radius: 95%;
}

#start.pushed, #stop.pushed{
  box-shadow: 0px 5px #ccc;
  height: 25px;
  line-height: 25px;
  margin-top: 5px;

}

#id_form1{

  padding-top: 50px;
}
(function(){
  'use strict';

  var target =document.getElementById("target");
  var result =document.getElementById("result");
  var start =document.getElementById("start");
  var stop =document.getElementById("stop");
  var startTime;
  var stopTime;
  var elapsedTime;//経過時間
  var diff; //目標タイムとの差
  result.className='standby';
  result.textContent=0.000.toFixed(3);

  function onButtonClick() {
    document.forms.form1.textBox1.value;
    console.log(target);
    }

  start.addEventListener('click', function(){
    startTime = Date.now();
    this.className = 'pushed';
    stop.className = '';
    result.textContent=0.000.toFixed(3);
    result.className = 'standby'



  });
  stop.addEventListener('click', function(){
    elapsedTime = (Date.now()-(startTime))/1000;
    result.textContent=elapsedTime.toFixed(3);
    this.className = 'pushed';
    start.className = '';
    diff = 5 - elapsedTime;
    if (Math.abs(diff) < 1){
      result.className = 'perfect'
    }else{
      result.className = ''
    }


  });

})();
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

JavaScriptでクロージャを作ってしまっているので、その中で定義したfunctionや変数等のスコープはクロージャ内に閉じてしまいます。
HTMLから参照できるのはグローバルスコープのみですから、クロージャ内で定義されたonButtonClickという関数は参照できないのです。

クロージャをやめるか、windowに定義してあげる必要があります。
onButtonClickだけをwindowに定義するには

window.onButtonClick = function onButtonClick() {
  // 以下略


としてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/11 16:37

    回答ありがとうございます。
    経験のあるaddEventListenerからやってみたいと思います。
    それができ次第windowで作ってみます

    キャンセル

  • 2018/09/11 17:03

    addEventListenerで書くならあえてグローバルスコープに関数定義するなんて方法をとる必要はありません。
    私の回答は
    <input type="button" value="決定!" onclick="onButtonClick();" />
    とHTMLを書く前提でのものです。

    キャンセル

+2

JavaScriptの中身が(function(){...})で覆われているので、この中の変数はローカル変数となってしまいます。

onclickに書くのではなく、addEventListenerなどでイベントをセットしましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/11 16:35

    回答ありがとうございます。
    onclickをやめ、addEventLictenerで書いてみましたが、うまく値の取得ができません。
    何が悪いか分からない状態です。
    よろしくお願いします。

    html
    <form name="form1" id="id_form1" action="">
    <input name="textBox1" id="id_textBox1" type="text" value="0" />
    <div id="decide">決定!</div>
    <br><a>目標値を入力してください</a>
    </form>

    javascript
    var target =document.getElementById("target");
    var result =document.getElementById("result");
    var start =document.getElementById("start");
    var stop =document.getElementById("stop");
    var decide =document.getElementById("decide");
    var input =document.getElementById("id_textBox1");
    console.log(target.textContent);

    var startTime;
    var stopTime;
    var elapsedTime;//経過時間
    var diff; //目標タイムとの差
    result.className='standby';
    target.textContent=0.000.toFixed(3);
    result.textContent=0.000.toFixed(3);

    decide.addEventListener('click', function(){
    var input =document.getElementById("id_textBox1");
    target.textContent=input;
    // console.log(input.textContent);
    console.log(input.textContent);
    });

    キャンセル

  • 2018/09/11 16:42

    textContentは、開きタグと閉じタグの間にあるものを取得するプロパティなので、<input />には使えません。.valueで取得しましょう。

    キャンセル

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

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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