<!DOCTYPE html>
<html>
  <head>
    <title>Water Rower</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1> Water Rower </h1>
    <button id="reset_button"> Reset </button>
    <div>
      <span id="keypad"> </span>
      <ul id="stats">
      </ul>
    </div>

    <script>
      var ws = new WebSocket("ws://" + location.host);
      var $keypad = document.getElementById("keypad");
      var $resetButton = document.getElementById("reset_button");
      var $stats = document.getElementById("stats");

      $resetButton.onclick = function postReset() {
        var msg = { msg: "reset rower"};
        ws.send( JSON.stringify(msg) );
      };

      ws.onmessage = function(rawMsg) {
        var msg = JSON.parse(rawMsg.data);

        if (msg.type === 'readings') {
          $stats.innerHTML = "";
          Object.keys(msg.data).forEach(function (k) {
            var reading = readings[k];
            var $reading = document.createElement('li');
            $reading.innerHTML = "<strong>" + k + "</strong> " + reading;
            $stats.appendChild($reading);
          });
        } else if (msg.type ==='keypad') {
          $keypad.innerHTML = 'Button: ' + msg.data;
        }
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Water Rower</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1> Water Rower </h1>
    <button id="reset_button"> Reset </button>
    <div>
      <span id="keypad"> </span>
      <ul id="stats">
      </ul>
    </div>

    <script>
      var ws = new WebSocket("ws://" + location.host);
      var $keypad = document.getElementById("keypad");
      var $resetButton = document.getElementById("reset_button");
      var $stats = document.getElementById("stats");

      $resetButton.onclick = function postReset() {
        var msg = { msg: "reset rower"};
        ws.send( JSON.stringify(msg) );
      };

      ws.onmessage = function(rawMsg) {
        var msg = JSON.parse(rawMsg.data);

        if (msg.type === 'readings') {
          $stats.innerHTML = "";
          Object.keys(msg.data).forEach(function (k) {
            var reading = msg.data[k];
            var $reading = document.createElement('li');
            $reading.innerHTML = "<strong>" + k + "</strong> " + reading;
            $stats.appendChild($reading);
          });
        } else if (msg.type ==='keypad') {
          $keypad.innerHTML = 'Button: ' + msg.data;
        }
      }
    </script>
  </body>
</html>

Fix bad naming of reading.
Fix bad naming of reading.
