Working with links, buttons, ...

Expanding a text/image when clicking a link

This function returns a html-text with a link that, when clicked, toggles visibility of a div-section containing descriptive text.
This is done by toggling the hidden-attribute of the div.
window.gm.printItem= function( id,descr){
var elmt ="<a0 id='${id}' onclick='(function($event){document.querySelector(\"div#${id}\").toggleAttribute(\"hidden\");})(this);'>${id}</a>";
elmt +="</br><div hidden id='${id}'>${descr}</div>";
return(elmt);
};

Update: you can do it without that function just with inline code. The link will toggle the sibling-paragraph following up: click here

toggles this text.

Show some text/img when clicking on an element

Think of a shop: there are alot of products on the page symbolized by icons. When the player clicks on it a text should appear because it would take to much space to show all text at once. Create html:
Notice that the paragraphs in info div are all set to hidden and that their id matches the images <div id="choice">
<p>click on image to show related text and border</p>
<table><tbody>
<tr>
<td><img id="1" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
<td><img id="2" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
</tr>
<tr>
<td><img id="3" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
</tr>
</tbody></table>
</div>
<div id="info">
<p id="1" hidden>Text 1</p><p id="2" hidden>[[Start]]</p><p id="3" hidden>Text 3</p>
</div>

In css:
This will be shown to mark the image as selected
.selected { border-style: double; border-width: thick; /* border-spacing: 20px; */ border-color: coral; }

in js:
this will assign the selected-style and toggle hidden-attribute
window.gm.onSelect = function(elmnt,ex_choice,ex_info) {
var all = $(ex_choice);
for(var i=0;i<all.length;i++) {
if(all[i].id === elmnt.id) {
all[i].classList.add("selected");
}
else all[i].classList.remove("selected");
}
all = $(ex_info)[0].children;
for(var i=0;i<all.length;i++) {
if(all[i].id === elmnt.id) {
all[i].hidden=false;
}
else all[i].hidden=true;
}
};

radio-button (static)

<fieldset> <legend>creditcard</legend>
<input type="radio" id="mc" name="payment" value="Mastercard" disabled>
<label for="mc"> Mastercard</label>
<input type="radio" id="vi" name="payment" value="Visa" checked>
<label for="vi"> Visa</label>
</fieldset>

• input-name groups the choice together in a group
• use disabled/checked to disable/preselect a choice
• the labels have a for-attribut that bind them to the inputs with this id; so the user doesnt need to hit the small radio-button, he can also click the label
• optionally you can embed the input-nodes into <fieldset></fieldset> to surround them with a frame-box
• optionally you can use legend-node to set a group-label

dropdown-box (static)

See HTML-code below how to create a dropdown-box by using a select-element with a number if options. See how the options textlabel or id-value is read in the onchange-Handler. You can also preselct an option with selected (this will not trigger the onchange-event):
<label>static dropdown:
<select id="person" onchange='selectperson(this)'>
<option value="23">Albers, Alfred</option>
<option value="24" selected>Braun, Berta</option>
<option value="25">Zeta, Bort</option>
</select>
</label>
<div id='output'></div>
<script>
function selectperson(elmnt) {
var menu = document.getElementById(elmnt.id);
document.querySelector('div#output').innerHTML = menu.value +""+menu.options[menu.selectedIndex].label+" "+menu.options[menu.selectedIndex].value;' } </script>`

dropdown-box (dynamic)

Instead of using hardcoded html-nodes for possible option-values and the pre-selected value, we can use a function to fetch thode values and add them via DOM-operations.

• on DOMContentLoaded-Event (just by caling a function in the script-node of the page) connect the dropbox with a datasource-function via SelectionController-Instance
• the datasource-function has to return a list of possible values for the dropbox and has to be implemented specifically
• the SelectionController will take care to fetch the data from the datasource and rebuild the option-elements

linked dropdown

The previous example can be extended if you have multiple dropdown boxes that relate to each other, f.e. a selector for characters and another for jobs to assign to them, where each character only can be assigned certain jobs.

• the child-dropdown (jobs) have to know if the parent-dropdown (characters) has changed; This can be done by let the childs register themself to the changed-event of the parent in the SelectionController
• the triggered event should cause the Controller to rebuild the list by fetching the datasource again and changing their options.

input color / number

• opens a color-picker
  <input id="background" type="color" value="#ffffff">

• input for numbers
  <input id="mass" type="number" min="30" max="225" step="0.5" value="75">

• slider-input for numbers; the sample also shows how to add a output that states the value
  <form oninput="x.value=/*parseInt*/(groesse.value)">
<input class="vertikal" name="groesse" id="groesse" type="range" step="0.5" min="0" value="80" max="250" orient="vertical">
<output name="x" for="groesse">80</output>
</form>

• onchange-event can be used to get input-notification once after mouse is released

• oninput-event will fire while the mouse is held down and slider moved !