そのいち
まずはボタンを押したら普通にアラートが表示されるように。
javaScriptはhtmlに直接書き込んでるよ。
htmlに埋め込んだのはこれら。
<script type="text/javascript">
function push_btn1(){
alert("ボタンを押したよ");
}
</script>
<button type="button" name="btn1" onclick="push_btn1()">
アラートが表示されるよ
</button>
でもこれって、OKしか選択できないんだよね・・・
戻り値はないよ。
そのに
というわけで次は、2択にしたい！
<script type="text/javascript">
function push_btn2(){
confirm("犬好きってことでいい？");
}
</script>
<button type="button" name="btn2" onclick="push_btn2()">
押すとOKとキャンセルの2択が出るよ！
</button>
OK押してもキャンセル押しても特に何も起きないのは何も設定していないからなので仕様だよ！
Okを押したらtrue、キャンセルを押したらfalseが帰るらしい。
で、これって2択ではあるけれど選択の内容とかアラートのデザインとか・・・
変更するために既に存在しているjQueryとか利用するのもありなんだけど、もうちょっと自分で何とかしてみたい・・・！
そのさん
アラートのデザインをいじる！ということで、alertとcomfirmは利用せずに、自分でdialogで作ってみようかと。
<dialog id="dlog3">
<p>これが自作のダイアログだよ！</p>
<form method="dialog">
<button type="submit" name="btn3_1" value="iine">いいね！</button>
<button type="submit" name="btn3_2" value="soso">そこそこ</button>
<button type="submit" name="btn3_3" value="za">残念…</button>
</form>
</dialog>
<button type="button" name="btn3_open" id="show3">
ボタンを押すと自作ダイアログがでるはず！
</button>
<script type="text/javascript">
var modal = document.getElementById('dlog3');
var btn_show = document.getElementById('show3');
btn_show.addEventListener('click', function() {
modal.showModal();
}, false);
modal.addEventListener('cancel', function(event){
event.preventDefault();
});
modal.addEventListener('close',function(event){
if(this.returnValue === 'iine'){
alert('いいねを選択したよ');
}else if (this.returnValue === 'soso') {
alert('そこそこを選択したよ');
}else{
alert('残念とはひどいな・・・！');
}
});
</script>
ちなみにこれ、先にjavaScript書いて後にhtmlを記述したら動かなくて、htmlの後にjavaScript記載したら動いたよ・・・
とりあえず3択にして、選んだものをアラートで返させてみましたよ。
そのよん
dialogで作ったやつを色々いじくりまわしてみるよ！
<dialog id="dlog4"><form method="dialog">
<div class="dg4head">
<p>確 認</p>
</div>
<div class="dg4main">
ログアウトを実施しますか？
</div>
<div class="dg4push">
<div class="dg4box">
<button type="submit" name="btn4_1" value="yes" class="dg4btn">はい</button>
</div>
<div class="dg4box">
<button type="submit" name="btn4_2" value="no" class="dg4btn">いいえ</button>
</div>
</div></form>
</dialog>
<button type="button" name="btn4_open" id="show4">
ログアウト
</button>
<script type="text/javascript">
(function(){
var dlog4 = document.getElementById('dlog4');
var btn_show4 = document.getElementById('show4');
btn_show4.addEventListener('click', function() {
dlog4.showModal();
}, false);
dlog4.addEventListener('cancel', function(event){
event.preventDefault();
});
dlog4.addEventListener('close',function(event){
if(this.returnValue === 'yes'){
document.getElementById("comment4").innerHTML = 'はい';
console.log('はい');
}else{
document.getElementById("comment4").innerHTML = 'いいえ';
console.log('いいえ');
}
});}());
</script><br>
<div id="comment4">
ここのコメントが変わる予定
</div>
javascriptの方はそのさんをちょっと変えて、htmlの方に文字が書かれるようにしてみたよ。
cssなんかもちょっと色々変えてみたり。さすがにそろそろjavaScriptは別ファイルにした方がいいかなあと思いながらfunctionで囲っておいてみたり。
あとは課題用に似たようなのをいくつか。
そのご
引き続きの色々なダイアログ作成。
今回のはjavaScriptを別ファイルにして呼びだしてみる。
function btn_push(dlognum){
dlognum.showModal();
}
function btn_select(dlognum,button){
dlognum.close();
if(button.value == 'top'){
document.getElementById("comment5").innerHTML = '管理トップに戻る';
}else if(button.value ==='stop'){
document.getElementById("comment5").innerHTML = '止める';
}else if(button.value ==='delete'){
document.getElementById("comment5").innerHTML = '削除する';
}
}
別ファイルからのjavaScript呼び出しのためには呼び出すものを関数化して呼び出す必要があるのね・・・
そのよん、みたいな書き方で書いて、それをfunction func(){~}みたいにしたのをhtmlでheadのところで
<script>window.onload = func;</script>って読み込んで置いてクリックイベントとか検知してもらうのがいいのだけど、
ボタンが増えると書き込む内容も増えてきてしまったので、キャンセルの扱いは考えずに、htmlのonclickを使って関数呼び出し引数突っ込んでできるだけjavaScript側を共有で使う形に・・・