ジャバスクリプトの１

スクリプトでアラートを出す
イベントハンドラー

準備

前回書いたHTMLを準備しよう

   <input id="button1" type="button" value="４，ボタンを押して下さい">
    <script>
        let button2=document.getElementById("button1");
        button2.onclick = function(){
            alert("アラート4");
       }
    </script>

ocument.getElementByIdで、<p>タグを捕まえて


let ほげ = document.getElementById(名前)　は色々使える。
<p>段落にid(名前)をつけて、document.getElementByIdで呼び出してみます。
そうすると、その名前をつけた段落が色をつけたり、中身を変えたり、色々自由に操作できます。
これで運勢占いが出来ます。

    <p id="p1">こんにちは！</p>
   <input id="button1" type="button" value="４，ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        let uranai = "兆吉";
        button2.onclick = function(){
            p1.innerHTML = uranai;
       }
    </script>

凶の貴方の運勢は！



解説

<p id="p1">こんにちは！</p>
として、段落Pにidで唯一の名前p1をつけます。
消してダブらないように注意
次にスクリプトをなおします。
let p1 = document.getElementById("p1");
ここでP!が2回出てきますが、前のｐ１はスクリプトの中の入れ物の名前で
後ろのP1は、pタグの名前です。
違ったものですので、前のp1をelrmentp1とか名前を変えていいのですが、なれてしまえばこの方がわかりやすいと僕は思います。
次にもう一つvar
let mojiretu ="超吉です。宝くじが当たるかもしれません。";
これは、文字を格納しておきます。
=は、後ろのものを前の入れ物に格納するという意味です。
そして、ボタンが押されると
myp1.innerHTML = mojiretu;
が発動して、占いが表示されます。
myp1.innerHTML = "大吉" ;
としても良いのですが、あとで（配列に直して）色々表示できるようにこうやっているのです。
次の問題へ進む