I like this functionality very much.
Look how you can get a reference to the element newly created in the last line of the below sample.
You can test it here : UWM
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
</head>
<body>
<h1>
User defined web modules
</h1>
<script>
function myInput(s, width) {
inlineDiv(span(s), "text-align: left").style.width = width + "px";
let ret = inputText("", {
baseAttrib: "margin: 3px; ",
fieldWidth: [100, 100],
});
return ret; // Return reference for access
}
h1("Input-Test");
myInput("Short", 100);
myInput("VeryLong", 100);
let rmedium = myInput("Medium", 100);
rmedium.oninput = (e) => console.log(e.target.value)
</script>
</body>
</html>
Top comments (3)
Nice, this is the way it was intended to use. We can call "myInput" a generator function, as it generates a new UI element or a group of elements.
Just, inputText already implemented this functionality, so this gives the same result:
(It seems the documentation is outdated and needs some urgfent update...)
Interestingly, it is possible put also some callback functions inside the "generator" function, so you can also implement some general behavoir. In the following example, a key filter was implemented inside the myInput:
(see examples->Binary)
Thank you Eckehard :-)
Just updated this part of the documentation...