数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。

javascriptのtoggle(戸愚呂)大実験~めちゃわかりやすいです

~初心者のtoggle(戸愚呂)大実験~

この見出しとかは全部自分で作った自動ツール←(みなさんもクリック)で作っています。
毎回のこのサービスの提供でお送りしていきます。笑
枠のスタイルシート自動作成ツールもあります。

今日はjavascriptのtoggleの大実験をしていきたいと思います。
噂によると何かをつけたり外したりできるとかできないとか・・・
果たして今日もプログラムはちゃんと動くのでしょうか?

レベル1 これをクリックしたら何かが起きるボタンを作る

またまた自作の枠のスタイルーシート自動作成ツールの出番です。 少々お待ちください。

ここクリック!?

できました!

実際の記述はこうです。

<div class="javawaku">ここクリック!?</div>

レベル2 クリックしたら登場しちゃうものを作る

またまた自作ツールの出番です。30秒で完成です。

ドーーーン!

できました!

実際の記述はこうです。

<div class="javawaku2">ドーーーン!</div>

まだまだ1日がかりで続きますが休憩するのでアップします。

レベル3 クリックするボタンにIDをつける

<div class="javawaku" id="ringo">ここクリック</div>

実際の見た目は変わらずです。

ここクリック?!

レベル4 id=ringoの要素を取り出す

要素を取り出すのはお決まりのこれdocument.getElementById('id'); です。

これを変数mamaに入れます。

var mama=document.getElementById('ringo');

レベル5 クリックしたらイベントを起こす

クリックしたらイベントを起こすためにはaddEventListener('click', function(){{ を使います。

mama.addEventListener('click', function(){
//処理内容
});

レベル6 クリックしたら出てくるものを呼び出す

次にクリックしたら出てくるもの
<div class="javawaku2">ドーーーン!</div> を呼び出します。

付け替える(javawakuとjavawaku2をいったりきたりさせる)のはtoggle(戸愚呂)を使います。

<div class="javawaku">ここクリック!?</div>
↓↓↓クリックすると
<div class="javawaku2">ドーーーン!</div>
になるようにします。

クラスを呼び出す場合はclassList を使います。

今回はjavawaku2とjavawaku(mama)というクラスをいったり来たりして付け替えるので

mama.classList.toggle('javawaku2');

となります。

レベル7 これをEventListenerの処理内容に入れる

mama.classList.toggle('javawaku2');
これを

mama.addEventListener('click', function(){
//処理内容
});

に入れます。

するとこうなります。

mama.addEventListener('click', function(){
mama.classList.toggle('javawaku2');
});

レベル8 実際にプログラムを書く

<script>
var mama=document.getElementById('ringo');
mama.addEventListener('click', function(){
mama.classList.toggle('javawaku2');
});
</script>

実際にクリックしてみると見た目は変わったのですがここクリック?!っていう文字が変わりませんでした笑

スタイルシートのdiv.javawaku2{}を取ってきちゃったみたいです。

ってことで文字を入れ替えるにはどうしたらいいか考えてみます。

続く

レベル9 カウントを数えて奇数偶数で文字を入れ替える

まずカウント変数を用意します。

var count=0;

次にid="ringo"のテキスト”ここクリック"?!"!をinnnerHTMLで取得します。

mama.innerHTML;

そしてこのテキストをカウントが1,3,5...の奇数の時、ドーーーン!でまた偶数の時にここクリック?!に変えます。

偶数は2で割れるので÷の記号%を使って%2 ===0とします。

奇数は2で割れないので÷の記号%を使って%2 !==0とします。

実際にはもし奇数の時~そうでないなら(else)を使います。

if(count %2 !==0){
mama.innerHTML=("ドーーーン");
}
else{
mama.innerHTML=("ここクリック");
}

またクリックする度にカウントが一つ増えるようにします。

count ++;

++とすることでカウントを一つずつ増やすことができます。魔法みたいですね。

レベル10 再びプログラムを書き直す

<script>
var count=0;
var mama=document.getElementById('ringo');
mama.addEventListener('click', function(){
count++;
alert("成功");
mama.classList.toggle('javawaku2');
if(count %2 !==0){
mama.innerHTML=("ドーーーン");
}
else{
mama.innerHTML=("ここクリック!?");
}
});
</script>

これで動くと思います

上の方のボタンをクリックしてみてください!うまく動きました☆

レベル11 補足

今思いついたのですがスタイルシートにcontent="文字";と入れておけばスムーズに解決できたかもしれません。

インターネットを調べたのですが文字を変える方法は出てこなかったのでたぶんこの説明が初です笑

出てきてもたぶん難しく書いてるだけです