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

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

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>5seconds!</title>
6  <link rel="stylesheet" href="css/styles.css">
7
8</head>
9<body>
10  <div class="container">
11    <div id="target">0.000</div>
12    <div id="result">0.000</div>
13    <div class="buttons">
14      <div id="start">start</div>
15      <div id="stop">stop</div>
16    <div id="input"></div>
17
18    </div>
19    <form name="form1" id="id_form1" action="">
20      <input name="textBox1" id="id_textBox1" type="text" value="" />
21      <input type="button" value="決定!" onclick="onButtonClick();" />
22      <br><a>目標値を入力してください</a>
23    </form>
24
25    <script src="js/main.js"></script>
26  </div>
27
28</body>
29
30</html>

css
1.container{
2  font-family: 'Courier New', sans-serif;
3  width: 300px;
4  margin: 30px auto;
5  text-align: center;
6  font-weight: bold;
7}
8
9#target, #result{
10  font-size: 35px;
11  margin-bottom: 20px;
12  background: #ccc;
13  height: 60px;
14  line-height: 60px;
15}
16
17#result.perfect{
18  background: #ff66cc;
19  color: white;
20}
21#result.standby{
22  background: #eee;
23}
24
25
26#start{
27  float: left;
28}
29#stop{
30  float: right;
31}
32
33#start, #stop{
34  cursor: pointer;
35  font-size: 20px;
36  height: 30px;
37  line-height: 30px;
38  background: #efefef;
39  width: 140px;
40  box-shadow: 0px 5px #ccc;
41  border-radius: 95%;
42}
43
44#start.pushed, #stop.pushed{
45  box-shadow: 0px 5px #ccc;
46  height: 25px;
47  line-height: 25px;
48  margin-top: 5px;
49
50}
51
52#id_form1{
53
54  padding-top: 50px;
55}

java
1(function(){
2  'use strict';
3
4  var target =document.getElementById("target");
5  var result =document.getElementById("result");
6  var start =document.getElementById("start");
7  var stop =document.getElementById("stop");
8  var startTime;
9  var stopTime;
10  var elapsedTime;//経過時間
11  var diff; //目標タイムとの差
12  result.className='standby';
13  result.textContent=0.000.toFixed(3);
14
15  function onButtonClick() {
16    document.forms.form1.textBox1.value;
17    console.log(target);
18    }
19
20  start.addEventListener('click', function(){
21    startTime = Date.now();
22    this.className = 'pushed';
23    stop.className = '';
24    result.textContent=0.000.toFixed(3);
25    result.className = 'standby'
26
27
28
29  });
30  stop.addEventListener('click', function(){
31    elapsedTime = (Date.now()-(startTime))/1000;
32    result.textContent=elapsedTime.toFixed(3);
33    this.className = 'pushed';
34    start.className = '';
35    diff = 5 - elapsedTime;
36    if (Math.abs(diff) < 1){
37      result.className = 'perfect'
38    }else{
39      result.className = ''
40    }
41
42
43  });
44
45})();

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

回答2件

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

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

投稿2018/09/11 04:47

maisumakun

総合スコア146544

atsushi-k

2018/09/11 07: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); });

maisumakun

2018/09/11 07:42

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

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

ベストアンサー

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

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

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

としてください。

投稿2018/09/11 04:45

spookybird

総合スコア1803

atsushi-k

2018/09/11 07:37

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

spookybird

2018/09/11 08:03

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

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

関連した質問