Q&A
回答ありがとうございます。
経験のあるaddEventListenerからやってみたいと思います。
それができ次第windowで作ってみます
プログラムの勉強を始めて１か月の初心者です。
ドットインストールの５秒当てゲームアプリを改造しています。
目標値(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件
2
JavaScriptの中身が(function(){...})で覆われているので、この中の変数はローカル変数となってしまいます。
onclickに書くのではなく、addEventListenerなどでイベントをセットしましょう。
投稿2018/09/11 04:47
総合スコア142953
2
ベストアンサー
JavaScriptでクロージャを作ってしまっているので、その中で定義したfunctionや変数等のスコープはクロージャ内に閉じてしまいます。
HTMLから参照できるのはグローバルスコープのみですから、クロージャ内で定義されたonButtonClickという関数は参照できないのです。
クロージャをやめるか、windowに定義してあげる必要があります。
onButtonClickだけをwindowに定義するには
js
1window.onButtonClick = function onButtonClick() { 2 // 以下略
としてください。
投稿2018/09/11 04:45
総合スコア1803
回答へのコメント
addEventListenerで書くならあえてグローバルスコープに関数定義するなんて方法をとる必要はありません。
私の回答は
<input type="button" value="決定!" onclick="onButtonClick();" />
とHTMLを書く前提でのものです。
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2018/09/11 07:35
2018/09/11 07:42