JavaScript - Making Decisions(Troubleshooting Car Issues)

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)、23(Troubleshooting Car Issues)を取り組んでみる。

23(Troubleshooting Car Issues)

コード(Emacs)

<div id="questions0"></div>

<button id="start0">start</button>

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

(function () {
    'use strict';
    var questions,
        question,
        div_questions = document.querySelector('#questions0'),
        button_start = document.querySelector('#start0'),
        createQuestion,
        nextQuestion,
        start;

    question = function (q, y, n) {
        return {
            question: q,
            yes: y,
            no: n,
        };
    };

    questions = question(
        'Is the car silent when you turn the key?',
        question(
            'Are the battery terminals corroded?',
            question('Clean terminals and try starting again.',
                     null,
                     null
                    ),
            question('Replace cables and try again.',
                     null,
                     null)
        ),
        question(
            'Does the car make a clicking noise?',
            question(
                'Replace the battery.',
                null,
                null
            ),
            question(
                'Does the car crank up but fall to start?',
                question(
                    'Check spark plug connections.',
                    null,
                    null
                ),
                question(
                    'Does the engine start and then die?',
                    question(
                        'Does your car have fuel injection?',
                        question(
                            'Get it in for service.',
                            null,
                            null
                        ),
                        question(
                            'Check to ensure the choke is opening and closing.',
                            null,
                            null
                        )
                    ),
                    null
                )
            )
        )
    );

    createQuestion = function (n, text) {
        var label = document.createElement('label'),
            select = document.createElement('select'),
            id = 'question' + n,
            option_text = ['yes/no', 'yes', 'no'];

        label.setAttribute('for', id);
        label.innerText = text;
        select.id = id;    
        option_text.forEach(function (text) {
            var option = document.createElement('option');

            option.innerText = text;
            select.appendChild(option);
        });
        return {label: label, select: select};
    };
    nextQuestion = function (n, questions) {
        var question,
            label,
            select;
        
        console.log(questions);
        if (questions.yes === null) {
            div_questions.innerHTML += questions.question
        } else {
            question = createQuestion(n, questions.question);
            label = question.label;
            select = question.select;
            div_questions.appendChild(label)
            div_questions.appendChild(select);
            div_questions.appendChild(document.createElement('br'));        
            select.onchange = function () {
                console.log('hello');
                nextQuestion(n + 1, questions[select.value]);
            };
        }
    };
    start = function () {
        var question;

        div_questions.innerHTML = '';
        nextQuestion(1, questions);
    };

    button_start.onclick = start;
}());