- ベストアンサー
<input> のbuttonで関数を実行したい
<input> 要素のbuttonを押すと※の処理が実行されるようにするには、どの部分を直すべきかご指摘いただけませんか。 よろしくお願いします。 -aaa.html <html> <!DOCTYPE> <body> <input id="ccc" type="button" value="スタート"> <script src="bbb.js"></script> </body> </html> -bbb.js document.getElementById("ccc").onclick = function buttonClick(){※}
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞原因 自分のヴァーチャル環境下では問題無く動作しますので、特に document.getElementById("ccc").onclick ～という記述式自体には問題は無いと思います。const を使うのは、まあ最近の流行りみたいなモノです。 質問者の想定通りに動作してないのであれば、実際の関数内に記述した処理に何か原因があるのか。或いはwebページに記述されているHTMLに何かしらの遠因があるのかもしれません。 とりあえず alert('test'); みたいな簡単な単一処理のみを記述してみて、それでも動作していないというのであれば…何かPC環境やwebサーバの方に原因があるかもしれません。 或いは bbb.js に他の処理も同時に記述されている場合、それが内部で競合しあって動作不良の原因となっている可能性もあります。
その他の回答 (1)
- 4017B
- ベストアンサー率73% (1304/1775)
webページ上のボタンをクリックした時に特定のJS関数を発火させたい場合、最も単純な記述式は以下の様な感じですね。 <html> <body> <script> function myfunc() { alert("OKWaveは素敵な質問箱!!"); } </script> <input id="ccc" type="button" value="スタート" onclick="myfunc();"> </body> </html> ～以上の様な感じでOKですが。この手法を用いる場合、事前にwebページのHTML内の必要な箇所に onclick="hoge()" を記述して置かなければなりません。 一旦、webページを公開した後、あとは一切変更も改修も加えない前提であれば、これでも特に問題は生じませんが…。仮にwebページ本体の方は別のCMS等、例えばWordPressのようなBlogサービスなどから別途に生成される仕組みになっている場合。そもそもwebページの投稿者に本体部分のHTML構造を自由に修正編集出来る権限が無い場合もあります。 そういった場合は… <html> <body> <input id="ccc" type="button" value="スタート"> <script src="bbb.js"></script> </body> </html> // bbb.js const myfunc = document.getElementById("ccc"); myfunc.onclick = function() { alert("OKWaveは素敵な質問箱!!"); } ～みたいにする事で解決出来ます。直にHTML内にJSを記述する場合も、外部からJSファイルとして読み込む場合も、そのwebページ本体が完全に読み込まれてからJSが最後に読み込まれて実行される様な順番で記述する事が鉄則です。
お礼
ありがとうございました。
補足
document.getElementById("ccc").onclick に原因があるというお考えでしょうか。
関連するQ&A
- JSのgetElementByIdについて
以下のコードはtextに書き込まれた内容を取得して表示するコードなのですが 値が取得できません どうすればできますか？ <!doctype html> <head> <meta charset="utf-8"> </head> <body> <input type="text" id="txt"> <input type="button" value="TEST" onclick="tamesi();"> <script> function tamesi(){ var aaa = document.getElementById('txt'); document.write(aaa); } </script> </body> </html>
- 締切済み
- JavaScript
- <input type="file"/>
に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？
- ベストアンサー
- JavaScript
- イベントハンドラに設定された関数を取得し、実行するには？
<html> <body> <script language="JavaScript" type="text/javascript"> function test(){ alert("testです") } </script> <input id="btntest" type="button" value="test" onclick="test()"/> </body> </html> このhtml文書に対し、 ・test(); ・document.getElementById("btntest").click;（ByTagName等を使用しても同じ方法とする） 上記方法以外にJavaScriptを用いて、 test()を実行するにはどうすればよいでしょうか？ var eventobj = document.getElementById("btntest").onclick; eval(eventobj); 上記みたいな形でevalをよくわからずに試してみましたがダメでした。
- ベストアンサー
- JavaScript
- onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 複数ボタンのクリックイベント
JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 （一番下に全ソースを貼りました。見づらくて申し訳ありません。） htmlに複数の似た名前のボタンがあります。 名前：button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。 ・0～９のイベントは正しく登録されている。 ・しかし、全てがchecked(10)を呼んでいる 質問１ これを回避する方法と、その対処理由を教えて頂きたくお願い致します。 質問２（オプション） 参考になる資料を教えていただければ幸いです。 例）サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。 */ for (i=2; i<4; i++) { document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>
- 締切済み
- JavaScript
- 下記コードの実行方法について質問です。
問題のコードは下記ですが、 bodyタグに onLoad="firstFunc()" と書かずに実行したいのですが、 スマートな方法はないでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body onLoad="firstFunc()"> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>
- ベストアンサー
- JavaScript
- 超初心者です。buttonをselectに変えるには？
<SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>～<select> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。
- ベストアンサー
- JavaScript
- 表示/非表示の切り替え
AAA、BBB、CCCの３つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか？ ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================
- ベストアンサー
- JavaScript
- HTML5のテストの方法が分かりません
http://www.youtube.com/html5 で試用版を有効にし、html5 と JavaScriptで以下のように書きました。 [test.html] <!DOCTYPE html> <html><head><script type="text/JavaScript" src="test.js"></script></head> <body><video id="video_player" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p>ビデオ再生</p></video> <input type="button" value="10秒 スキップ" onclick="skip()" /></body> </html> ------------------ [test.js] function skip() { document.getElementById("video_player").currentTimes += 10; } ------------------- test.html を GoogleChrome で開きましたが、黒いバーと「[10秒 スキップ」ボタンが表示されるだけで、ボタンを クリックしても何も動きません。 HTML5 のテストはどのようにして行うのでしょうか？
- ベストアンサー
- HTML
お礼
ご回答ありがとうございました。