JavaScript - Making Decisions(Comparing Numbers)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• 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 4(Making Decisions)、22(Comparing Numbers)を取り組んでみる。

22(Comparing Numbers)

コード(Emacs)

<label for="inputs0">
  Numbers:
</label>
<input id="inputs0" type="number" min="1" step="1" value="3">
<br>
<div id="numbers0"></div>

<div id="output0"></div>

<script src="sample22.js"></script>

(function () {
    'use strict';
    var input_numbers,
        numbers = [],
        input_inputs = document.querySelector('#inputs0'),
        div_numbers = document.querySelector('#numbers0'),
        div_output = document.querySelector('#output0'),
        createLabel,
        createInput,
        displayInputs,
        display;

    createLabel = function (i) {
        var label = document.createElement('label');

        label.setAttribute('for', 'number' + i);
        label.innerText = 'Enter the ' + (i + 1) + 'th number: ';
        
        return label;
    };
    createInput = function (i) {
        var input = document.createElement('input');

        input.id = 'number' + i;
        input.type ='number';
        input.min = '0';
        input.step = '1';
        input.value = i + 1;
        numbers.push(i + 1);
        
        return input;
    };
    displayInputs = function () {
        var n = parseInt(input_inputs.value, 10),
            i,
            input,
            br;

        input_numbers = [];
        numbers = [];

        div_numbers.innerHTML = '';
        for (i = 0; i < n; i += 1) {
            input = createInput(i);
            br = document.createElement('br');
            input_numbers[i] = input;
            div_numbers
                .appendChild(createLabel(i))
                .appendChild(input);
            div_numbers.appendChild(br);
        }
        input_numbers.forEach(function (input, i) {
            input.onchange = function () {
                var n = parseInt(input.value, 10);
                
                if (numbers.indexOf(n) === -1) {
                    numbers[i] = n;
                    display();
                } else {
                    numbers[i] = undefined;
                    input.value = '';
                    alert('alreday been entered!');
                    div_output.innerHTML = '';
                    input.focus();
                }            
            };
        });
        display();
    };
    display = function () {
        var max = numbers[0],
            i,
            len = numbers.length,
            n;

        if (max === undefined) {
            return;
        }
        for (i = 1; i < len; i += 1) {
            n = numbers[i];
            if (n === undefined) {
                return;
            }
            if (n > max) {
                max = n;
            }
        }
        div_output.innerText = 'The largest number is ' + max + '.';
    };

    input_inputs.onchange = displayInputs;

    displayInputs();
}());

Numbers: