firebase realtime databaseでデータの取得と更新がしたい

リンク内容を参考にfirebase realtime databaseでウェブアプリをつくっているのですが、データの更新も取得もできません。
解決法を教えていただきたいです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Firebase Sample</title>
6  </head>
7  <body>
8    SampleKey :
9    <input type="text" id="valueInput" placeholder="Message">
10    <input type="button" id="updateButton" value="更新"/>
11  </body>
12  <!-- The core Firebase JS SDK is always required and must be listed first -->
13  <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>
14
15  <!-- TODO: Add SDKs for Firebase products that you want to use
16    https://firebase.google.com/docs/web/setup#available-libraries -->
17
18  <script>
19    // Your web app's Firebase configuration
20    var firebaseConfig = {
21      apiKey: "***",
22      authDomain: "***.firebaseapp.com",
23      databaseURL: "https://***.firebaseio.com",
24      projectId: "***",
25      storageBucket: "***.appspot.com",
26      messagingSenderId: "***",
27      appId: "***"
28    };
29    // Initialize Firebase
30    firebase.initializeApp(firebaseConfig);
31  </script>
32  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
33  </script>
34  <script>
35  var db = firebase.database();
36  var root = db.ref("/");
37  root.on("value", function(snapshot) {
38    $('#valueInput').val(snapshot.val().sampleKey);
39  });
40  $('#updateButton').click(function(){
41    root.set({sampleKey:$('#valueInput').val()});
42  });
43  </script>
44</html>
45