JSFiddle - React, Tailwind, and code Playground

by tranxuanthang

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebAssembly Example</title>
  <script src="script.js"></script>
</head>
<body>
  <input type="number" id="numA" />
  <input type="number" id="numB" />
  <br>
  <button id="addBtn">Add</button>
  <span id="result"></span>
</body>
</html>

JavaScript

var add;

const loadWebAssembly = fileName => fetch(fileName)
  .then(response => response.arrayBuffer())
  .then(bits => WebAssembly.compile(bits))
  .then(module => {
    return new WebAssembly.Instance(module)
  });

loadWebAssembly("https://tranxuanthang.github.io/wasm-example/add.wasm")
  .then(instance => {
    add = instance.exports.add;
    console.log('Ready!');
  });

document.getElementById("addBtn").addEventListener("click", () => {
  let numA = document.getElementById("numA").value;
  let numB = document.getElementById("numB").value;
  document.getElementById("result").innerText = add(numA, numB);
});