index.html

<textarea id="output_area" style="width:100%; height:50%"></textarea>

<!-- Button for triggering c++ multiply method  -->
<button onclick="multiplyInCpp(event.clientX,event.clientY)" style="width:100%; height:50%">Show Result</button>
<script>

  function output(text) {

    document.getElementById("output_area").append(text + "\n\n");

  }

  var Module = {

    'print': function (text) {

      output("print\n" + text);

    },

    'printErr': function (text) {

      output("printErr\n" + text);

    },

  };

  async function multiplyInCpp(x, y) {

    // invoke multiply method from cpp only after initialization of Module
    ReadyToLoad().then((Module) => {

      output(Module.ccall('multiply', // name of C++ function 
                 'number', // return type
                 ['number','number'], // argument types
                 [x, y])); // arguments 


    });
    
  }


</script>

<script src="multiply.js"></script>
<script src="multiply_in.js"></script>