mixsy/index.js

import init, {load_main, load_additional, merge} from './pkg/mixsy.js';

async function run() {
    await init();

    const main         = document.getElementById('a');
    const additional   = document.getElementById('b');
    const output       = document.getElementById('c');
    const merge_button = document.getElementById('merge');

    function handleResult(inputElement, message) {
        console.log(message);
        let messageBox = inputElement.nextSibling;
        messageBox.innerText = message;
        messageBox.style.display = "block"
        setTimeout(() => {messageBox.style.display = "none"}, 4000);
    }

    main.addEventListener('change', () => {
        if (main.value) {
            handleResult(main, load_main(main.value));
        }
    });

    additional.addEventListener('change', () => {
        if (additional.value) {
            handleResult(additional, load_additional(additional.value));
        }
    });

    function mix() {
        output.value = merge();
    }

    merge_button.addEventListener('click',    mix);
    merge_button.addEventListener('touchend', mix);
}

run();