<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>イベントリスナ</title>
<script>
window.addEventListener('load', function() {
init();
var ev_toggle_style = function(){
toggle_style('no1','red','white');
}
document.getElementById('no1').addEventListener('keyup',ev_toggle_style,false);
var ev_style_change= function(){
style_change('no2','red','white');
}
document.getElementById('no2').addEventListener('click',ev_style_change,false);
var ev_reset_change = function(){
style_change('no2','','');
}
document.getElementById('no2').addEventListener('click',ev_reset_change,false);
var ev_detect_input = function(){
detect_input('comment','comment_legend');
}
document.getElementById('comment').addEventListener('click',ev_detect_input,false);
var ev_prompt_input = function(){
prompt_input('comment','comment_legend');
}
document.getElementById('comment').addEventListener('click',ev_prompt_input,false);
var ev_alert_input = function(){
alert_input('comment','comment_legend');
}
document.getElementById('comment').addEventListener('click',ev_alert_input,false);
document.getElementsByName('goods')[0].addEventListener('load',change_select,false);
},false);
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>
<h1>イベントリスナ</h1>
<p id="check_load">まだ読み込んでないよ</p>
<figure>
<div id="no1">
クリックしてね
</div>
<div id="no2">
マウスを上に重ねてみてね！
</div>
<fieldset>
<legend id="comment_legend">コメント</legend>
<textarea id="comment">
</textarea>
</fieldset>
<fieldset>
<legend id="goods_legend">商品</legend>
<select name="goods">
<option value="5000万円">なんでも貫く矛</option>
<option value="一億円">絶対に貫かれない盾</option>
</select>
<p id="selection"></p>
</fieldset>
</figure>
</body>
</html>