マウスクリックでボタンを作成
マウスをクリックするとボタンが作成されます。作成されたボタンをクリックすると、アラートウィンドウ [ cliked:button 番号 ] が表示されます。
アラートウィンドウ
ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<title>ボタンを作成</title>
<style>
html,body,h1 {
margin: 0;
padding: 0;
}
h1{
width:490px;
font-size:14pt;
background-color:#ccccff;
padding:5px;
margin: 10px 0 0 50px;
}
#area{/*ボタンを作成する範囲*/
position:absolute;
background-color:#eeeeee;
left:50px;
top:60px;
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
var counter = 0;
function doDown(event){
var x = event.clientX;/*マウスカーソルの位置 X*/
var y = event.clientY;/*マウスカーソルの位置 Y*/
var btn = document.createElement("input");/*input要素のノードを作成*/
btn.type = "button";/*inputのタイプをbuttonに設定*/
btn.value = "button " + ++counter;/*ボタンの作成番号 counterを+1してから足す*/
btn.style.position = "absolute";/*絶対配置*/
btn.style.left = (x - 35) + "px";/*ボタン作成位置 X*/
btn.style.top = (y - 20) + "px";/*ボタン作成位置 X*/
btn.onclick = function(event){
alert("clicked:" + event.target.value);/*ボタンをクリックしたときの表示*/
};
document.body.appendChild(btn);/*body直下にボタンを作成する*/
}
</script>
</head>
<body>
<h1>ボタンを作成</h1>
<div id="area" onmousedown="doDown(event);"></div>
</body>
</html>
