document.getElementByIdを使ってみる - 沼田的瀬戸際メモ(仮)

突然ですが今週の値上がり予想の仮想通貨はLiskです。
今は 1Lisk = 177円ですが、朝は168円くらいでした。

予想

木曜日(2017/6/8)まで上げ上げで、翌日の金曜日(2017/06/09)に利確下げ!!

いきなり相場予想を書いてしまいました。
こんにちは。瀬戸際の沼田です。

document.getElementByIdとは

Webページ上にボタンを表示させて、そのボタンをクリックすると別のページへ飛ぶ。というプログラムを練習で書いていましたが、動いてませんでした。先輩に見てもらうと、clickの先頭が大文字に(Clickに...)となっていただけでしたが、それを発見出来るようにならんといかんのですね。

document.getElementById()は、カッコ()で指定したIDを持つ要素を返してくれます。今回は以下のように使いましたが、これはbodyの中で'add'というIDを持つ要素を探して返してくれます。
以下の例だと、ChromeのディベロッパーツールのConsole等にdocument.getElementById('add')と貼り付けると、

<button id = 'add'>Click!</button>

と返してくれます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <title>ボタン元</title>
  <link rel="stylesheet" href="index.css"/>
</head>

<body>
  <button id = 'add'>Click!</button>
  <script src="event.js"></script>
</body>

</html>

event.jsはコチラ↓

document.getElementById('add').addEventListener('click', function() {
  window.open('http://aed2797.hatenablog.com/')
})

これでクリックすると新しいタブを開いてこのブログにアクセスできます。新しいタブを開くのはwindow.open()の部分ですが、新しいタブを開かずに指定したページに行くには以下のように書きます。

document.getElementById('add').addEventListener('click', function() {
  window.location.href = 'http://aed2797.hatenablog.com/'
})

万歳！やっと動きました。でも実はクリックごとに違うサイトに行きたいのです。それについてはまた後日。

今日より明日は改善するよう頑張っていきます（＞＜）