- ベストアンサー
<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% (1336/1814)
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 に原因があるというお考えでしょうか。
お礼
ご回答ありがとうございました。