#33ゼロからはじめるプログラミング講座の第四十五回です。今回はウェブページでスナイプをするコードを作ってみましょう。スナイプとは狙い撃ちをすることです。0時00分にスタートするタイムセール品をショッピングカートに入れたりなど。今まで学んできたJavaScriptは全て自分で作ったhtmlファイル上で動かしてきましたが、もちろんネット上にあるウェブページでも動かすことができます。その方法は別で解説していますので、そろそろ読み始めて実践していっても良い頃だと思います。index.htmlを作り直しましょう。id="cart">カートは空です。'カートに商品が入っています。time;">カートに入れる。src="test.js"></script></body>押すとカートに商品が入るボタンもどきがあります。これを指定した時間にクリックさせましょう。そのページはセール開始後にページを読み込まないとカートに商品を入れられないようになっているものを想定します。これを、セール開始後に自動でカートに商品を追加しなさい。今回は開始時間は自分で想定しましょう。1分後とかで良いですね。ボタンを押すと押した時間が表示されるようになっているので自分で想定した時間より前にボタンが押された場合は失敗だと自分で判定してください。目的の結果を得るプログラムの構成を考えてみましょう。以下は解答例になります。カートに追加ボタンを押す関数を作る。カートに追加する時間を指定するフォームを作る。フォームに入力された時間を取得する。現在の時間を取得してフォームに入力された時間になったらページを更新する。はじめにカートに追加するボタンを押す。今回は時間を指定するフォームとスナイプを開始するボタンを作ります。秒スナイプスタート今まで解説した知識で足りないのはJavaScriptにボタンをクリックさせる処理ですね。入力されたinputの中身は.valueのプロパティで取得できます。ページの更新はlocationでもできますが、window.location.reload()を使うと簡単です。ボタン要素をJavaScriptにクリックさせるには要素.click()とするだけで良いです。これで目標の結果が得られそうです。自分でコードを作ってみてください。1.5.カートに追加ボタンを押す関数を作る。addbtn.click()}addCart()ボタン要素.click()でボタンを押します。2.カートに追加する時間を指定するフォームを作る。html}createElementで要素を動的に作成追加します。使いまわすので関数化しています。insertBefore()では追加した要素を返すので変数で受け取っておきます。後々編集するときに使えます。node.nextElementSiblingは要素の次の兄弟要素を指定します。<ul><li>1</li><li>2</li></ul><a>3</a>li1の次の兄弟要素はリスト2です。li2の次の兄弟要素はありません。ulの次の兄弟要素はaです。スタートボタンはcreateElementを使わずにinnerHTMLを編集する方法をとっています。<body>のinnerHTML全文をreplaceで編集して入れ直しています。3.4.フォームに入力された時間を取得する。現在の時間を取得してフォームに入力された時間になったらページを更新する。インターバルを格納するようの変数。スナイプスタートを押した時に実行される関数。インターバルがある場合に止めます。