私は音楽オーディションに登録するためのウェブサイトを作成しようとしているプロジェクトに取り組んでいます。その一部には、一度クリックすると、それぞれに割り当てられた時間のあるボタンを表示するオーディションの日が表示されたボタンが表示されます。これらのボタンをクリックすると、機能が変更され、何も送信されません。JavaScript関数からHTMLボタンを作成するにはどうすればよいですか?
これは実現可能なコンセプトですか?もしそうなら、私はこれをどのように実行するのですか?このような
私は音楽オーディションに登録するためのウェブサイトを作成しようとしているプロジェクトに取り組んでいます。その一部には、一度クリックすると、それぞれに割り当てられた時間のあるボタンを表示するオーディションの日が表示されたボタンが表示されます。これらのボタンをクリックすると、機能が変更され、何も送信されません。JavaScript関数からHTMLボタンを作成するにはどうすればよいですか?
これは実現可能なコンセプトですか?もしそうなら、私はこれをどのように実行するのですか?このような
何か:
var btn = document.createElement('button');
または:
var btn = document.createElement('input');
btn.type = 'button';
Look into the document.createElement()
function in Javascript。使用例は以下のようになり:
<html>
<head></head>
<body>
<div id="div1"></div>
<script>
function createButton(id, text) {
var b = document.createElement("input");
b.type = "button";
b.id = id;
b.value = text;
b.onclick += button_click; //assigns the button_click function to the click event of the button.
var div1 = document.getElementById("div1");
div1.appendChild(b); //add the button to the page in the div
}
function button_click(e) {
e = window.event ? window.event : e;
var b = e.target;
b.disabled = true;
}
createButton("button1", "Click Me");
</script>
</body>
</html>
この実施例はまた、event objectを使用し、要素のdisabled
性質、ならびにdocument.getElementById()
function。
createButton()
関数の例は他の関数から呼び出すことができますが、この場合は常にdiv
という新しいボタンが追加されます。
ここでは、e.target
のボタンをクリックすると、イベントの対象となるボタンが表示されます。 e = window.event ? window.event : e;
行は、JavaScriptイベントオブジェクトが確実に取得されたことを確認するためのクロスブラウザの方法です。
この例では、特定の問題は解決しない可能性がありますが、これがHTML/JavaScriptで可能かどうかという疑問に答えることができます。
HTMLやJavaScriptに関する入門チュートリアルがいくつか用意されています。はい、物事を行うボタンがあることは実現可能なコンセプトです。 – David
もう少し詳しく説明してもらえますか? – Pepedou
document.createElement( 'button');しかしチュートリアルは本当に始めるのに最適な場所でなければなりません。 – Shilly