<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>イベントハンドラ</title>
<script>
function init(){
document.getElementById('check_load').innerHTML = '読み込み完了！';
}
function style_change(id,background,color) {
var element = document.getElementById(id);
element.style.background = background;
element.style.color = color;
}
function toggle_style(id,background,color) {
var element = document.getElementById(id);
if(element.style.background == background) {
style_change(id,'','','');
} else {
style_change(id,background,color);
}
}
function detect_input(id,legend_id){
var area = document.getElementById(id);
var legend = document.getElementById(legend_id);
area.style.border ='1px solid darkgray';
area.style.background = '#eaf4fc';
legend.innerHTML = 'よしよし、きちんと書いたな';
}
function prompt_input(id,legend_id){
var area = document.getElementById(id);
var legend = document.getElementById(legend_id);
if(document.getElementById(id).value==""){
area.style.border ='';
area.style.background = '#f0e68c';
legend.innerHTML = 'きちんと書くんだぞ！';
}
}
function alert_input(id,legend_id){
var area = document.getElementById(id);
var legend = document.getElementById(legend_id);
if(area.value == ""){
area.style.border ='';
area.style.background = '';
legend.innerHTML = 'なんか書けや';
}
}
function change_select(){
document.getElementById('selection').innerHTML = '代金:' + document.getElementsByName('goods')[0].value + '、毎度あり';
}
</script>
<style>
figure{
display:flex;
}
textarea{
height:10rem;width:10rem;
font-size:2em;
background:pink;
border:1px solid crimson;
}
button{
border:solid 1px #ccc;
padding:5px 15px;
margin:0 5px;
font-family:Arial, sans-serif;
font-size:1rem;
text-transform:uppercase;
font-weight:bold;
background:#fddea5;
color:#333;
cursor:pointer;
}
div{
height:10rem;width:10rem;
background:orange;
color:brown;
font-size:2em;
padding:1em;
}
</style>
</head>
<body on="init()">
<h1>イベントハンドラ</h1>
<p id="check_load">まだ読み込んでないよ</p>
<figure>
<div id="no1" on="toggle_style('no1','red','white');">
クリックしてね
</div>
<div id="no2" on="style_change('no2','red','white');" on="style_change('no2','','','');">
マウスを上に重ねてみてね！
</div>
<fieldset>
<legend id="comment_legend">コメント</legend>
<textarea id="comment" on="detect_input('comment','comment_legend');" on="prompt_input('comment','comment_legend');" on="alert_input('comment','comment_legend')">
</textarea>
</fieldset>
<fieldset>
<legend id="goods_legend">商品</legend>
<select name="goods" on="change_select()">
<option value="5000万円">なんでも貫く矛</option>
<option value="一億円">絶対に貫かれない盾</option>
</select>
<p id="selection"></p>
</fieldset>
</figure>
</body>
</html>