webstead: input from an array of tickyboxes

This commit is contained in:
Ben Harris 2025-09-16 21:07:01 +01:00
parent 6cf53005fe
commit 09c777481b

View File

@ -6,8 +6,19 @@
<script type="module"><![CDATA[
import Bedstead from './bedstead.js';
function update_glyph() {
var args = [];
for (var row of document.getElementById("pixels").rows) {
var arg = 0;
for (var pixel of row.getElementsByTagName('input')) {
arg *= 2;
if (pixel.checked) {
arg += 1
}
}
args.push(arg.toString())
}
Bedstead({
arguments: document.getElementById("input").value.split(" "),
arguments: args,
print: function(charstring) {
document.getElementById("output").textContent = charstring;
document.getElementById("rendered")
@ -21,15 +32,79 @@
}
});
}
document.getElementById("run").onclick = update_glyph;
for (var e of document.getElementsByTagName('input')) {
e.onchange = update_glyph;
}
]]>
</script>
</head>
<body>
<form>
<label for="input">Input</label>
<input type="text" id="input"/>
<input type="button" id="run" value="Run!"/>
<table id="pixels">
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
</table>
</form>
<p><code id="output"></code></p>
<div>