JavaScript - ページの部品をかき集める(ノードのテキストを置き換える関数の作成)

Head First JavaScript
頭とからだで覚えるJavaScriptの基本
(オライリージャパン)
Michael Morrison (著) 豊福 剛 (翻訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の8章(ページの部品をかき集める)、自分で考えてみよう(p.369)を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

自分で考えてみよう(p.369)

コード(BBEdit)

sample.js

var decision1 = $('#decision1'),
    decision2 = $('#decision2'),
    replaceNodeText = function (id, new_text) {
        var node = document.getElementById(id),
            text_node = document.createTextNode(new_text);
        while (node.firstChild) {
            node.removeChild(node.firstChild);
        }
        node.appendChild(text_node);
    },
    i = 0,
    j = 0,
    k = 0;

decision1.click(function () {
    replaceNodeText('scenetext', 'シーン説明: ' + (function () {
        i += 1;
        return i;
    })());
    replaceNodeText('decision1', '決定1: ' + (function () {
        j += 1;
        return j;
    })());
});
decision2.click(function () {
    replaceNodeText('scenetext', 'シーン説明: ' + (function () {
        i += 1;
        return i;
    })());
    replaceNodeText('decision2', '決定2: ' + (function () {
        k += 1;
        return k;
    })());
});

sample.html

<div id="scenetext">シーン説明</div><br />
<span id="decision1">決定1</span>
<span id="decision2">決定2</span>

シーン説明

決定1 決定2