makotom/change-autoincr.html

## change-autoincr.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Change events on text box</title>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const input = document.querySelector('input#autoincr-textbox');
        const output = document.querySelector('div#autoincr-output');

        input.addEventListener('change', () => {
            // Output its value to a newly-created p element
            const p = document.createElement('p');

            p.appendChild(document.createTextNode(`At ${Date.now()}: A change was made.`));
            output.appendChild(p);
        });

        // Refresh the content of the text box once per 2 seconds.
        {
            let ctr = 0;
            const incr = () => {
                input.value = `${ctr}`;

                // Blur focus to mimic a user commitment
                input.blur();

                ctr = (ctr + 1) % 10;
            };

            incr();
            window.setInterval(incr, 2000);
        }
    });
</script>

<div id="sandbox-autoincr">
    <p id="autoincr-desc">
        <code>change</code> events should not be fired unless a user commits the change<sup><a href="https://html.spec.whatwg.org/multipage/indices.html#event-change">&dagger;</a></sup>.<br>
        Then, what would happen if a computer manipulates user input and then mimics a user commitment? Input a text onto the text box below <strong>without commiting your input (i.e. without hitting Enter key or Tab key)</strong>, and see whether a message saying "a change was made" appears afterwards.
    </p>
    <input id="autoincr-textbox">
    <div id="autoincr-output"></div>
</div>
	<!doctype html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>Change events on text box</title>

	<script>
	window.addEventListener('DOMContentLoaded', () => {
	const input = document.querySelector('input#autoincr-textbox');
	const output = document.querySelector('div#autoincr-output');

	input.addEventListener('change', () => {
	// Output its value to a newly-created p element
	const p = document.createElement('p');

	p.appendChild(document.createTextNode(`At ${Date.now()}: A change was made.`));
	output.appendChild(p);
	});

	// Refresh the content of the text box once per 2 seconds.
	{
	let ctr = 0;
	const incr = () => {
	input.value = `${ctr}`;

	// Blur focus to mimic a user commitment
	input.blur();

	ctr = (ctr + 1) % 10;
	};

	incr();
	window.setInterval(incr, 2000);
	}
	});
	</script>

	<div id="sandbox-autoincr">
	<p id="autoincr-desc">
	<code>change</code> events should not be fired unless a user commits the change<sup><a href="https://html.spec.whatwg.org/multipage/indices.html#event-change">&dagger;</a></sup>.<br>
	Then, what would happen if a computer manipulates user input and then mimics a user commitment? Input a text onto the text box below <strong>without commiting your input (i.e. without hitting Enter key or Tab key)</strong>, and see whether a message saying "a change was made" appears afterwards.
	</p>
	<input id="autoincr-textbox">
	<div id="autoincr-output"></div>
	</div>