JavaScript - Data Structures(Picking a Winner)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• kjs-array (JavaScript Library)
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
• JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 7(Data Structures)、35(Picking a Winner)を取り組んでみる。

35(Picking a Winner)

コード(Emacs)

<div id="output0"></div>
<script src="array.js"></script>
<script src="sample35.js"></script>

(function () {
    'use strict';
    var div_output = document.querySelector('#output0'),
        names = [],
        output;

    output = function (i) {
        var id = 'name' + i,
            input;
        
        div_output.innerHTML +=
            '<label for="' + id + '">Enter a name: </label>' +
            '<input id="' + id + '" type="text"><br>';

        input = document.querySelector('#' + id);
        input.onblur = function () {
            var name = input.value;
            
            if (name === '') {
                div_output.innerHTML += 'The winner is... ' + names.random();
            } else {
                names.push(name);
                input.setAttribute('value', name);
                input.setAttribute('readOnly', true);
                input.onblur = null;
                output(i + 1);
            }
        };
    };
    output(0);
}());