<div class="input-examples">
	<div><input type="text" name="username" value=""></div>
</div>

<div class="input-examples">
	<div><input type="text" name="username" value="">div>
	<div><textarea name="message">textarea>div>
	<div>
		<select name="color">
			<option value="red">Redoption>
			<option value="green" selected>Greenoption>
			<option value="blue">Blueoption>
		select>
	div>
	<div>	
		<select name="size" multiple>
			<option value="s">Smalloption>
			<option value="m">Mediumoption>
			<option value="l">Largeoption>
		select>
	div>
	<div>
		<input type="radio" name="payment" value="credit" id="credit">
		<label for="credit">Credit Cardlabel>
		<input type="radio" name="payment" value="debit" id="debit">
		<label for="debit">Debit Cardlabel>
		<input type="radio" name="payment" value="paypal" id="paypal">
		<label for="paypal">PayPallabel>
	div>
	<div>
		<input type="checkbox" name="features" value="wifi" id="wifi">
		<label for="wifi">WiFilabel>
		<input type="checkbox" name="features" value="bluetooth" id="bluetooth">
		<label for="bluetooth">Bluetoothlabel>		
		<input type="checkbox" name="features" value="gps" id="gps">
		<label for="gps">GPSlabel>		
	div>
	<div>
		<input type="file" name="documents" multiple accept=".pdf,.doc,.docx">
	div>
div>

const container = $1('.input-examples');

// Iterate through each direct div child of the container.
$a('>div', container).each(div => {
    // Find the first child element within the current div.
    // Based on the HTML structure, this is the actual field input/textarea/select/etc.
    const field = $1('>*', div);

    // Create a button 
    const btn = $n("log value");

    // Append the button to the current div so it sits next to the field.
    div.append(btn);

    // Attach a click event listener to the button.
    btn.onClick(() => {
        // When the button is clicked, log the field's name and its current value.
        console.log(`name: ${field.getAttr("name")} value:`);

        // Call the getValue() method on the field and log the result.
        // The output will vary based on the type of field and its current state.
        console.log(field.getValue());		
    });
    /*
    Expected outputs based on initial HTML state:
    - input "username" -> string 
    - textarea "message" -> string
    - select "color" -> string (selected color)
    - select "size" multiple -> array of strings (selected sizes), empty if none selected
    - radio "payment" -> string (selected payment), null if none selected
    - checkbox "features" -> array of strings (selected features), empty if none selected
    - file "documents" -> FileList object, empty if none selected with .length 0
    */
});