Web Development with ReasonML

Accessing the DOM

We’re going to be using parts of the Webapi.Dom module a lot, so we’ll set up some module aliases to avoid repetitive typing:

webpage/shirts/src/WebShirts.re

module D = Webapi.Dom;
module Doc = Webapi.Dom.Document;
module Elem = Webapi.Dom.Element;

Why use D instead of Dom as the alias for Webapi.Dom? Though it would be more readable, using Dom hides the declaration of the built-in Dom module, which we’ll use when we’re dealing with events. You’ll learn much more about modules in Chapter 7, ​Structuring Data with Records and Modules​.

Our first task is to set up a click event handler on the button, which means we have to call getElementById.

let calcButton = Doc.getElementById("calculate" ...